css - Rotate a cube around it's diagonal -
i have cube rotate trough it's diagonal. how rotate cube around particular diagonal? tried different rotations nothing seems fit me. looking css solution/explenation.
.container { width: 200px; height: 200px; position: absolute; perspective: 10000px; left: 50vw; top: 50vh; transform: translatex(-50%) translatey(-50%); } .cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } .cube figure { margin: 0; width: 100%; height: 100%; display: block; position: absolute; border: 2px solid black; box-sizing: border-box; } .cube .front { transform: rotatey(0deg) translatez(100px); } .cube .back { transform: rotatex(180deg) translatez(100px); } .cube .right { transform: rotatey(90deg) translatez(100px); } .cube .left { transform: rotatey(-90deg) translatez(100px); } .cube .top { transform: rotatex(90deg) translatez(100px); } .cube .bottom { transform: rotatex(-90deg) translatez(100px); } .cube { transform: rotatey(35deg) rotatex(45deg); } .cube:hover { transition: 1s; transform: rotatey(35deg) rotatex(45deg); }
<section class="container"> <div class="cube"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </section>
found - solved problem (hover on cube).
explanation: transform stack evaluated right left. so, if want rotate element transformed around z axis, need set transform first one.
if original is
transform: translatex(-50%) translatey(-50%);
then
transform: rotatez(value) translatex(-50%) translatey(-50%);
will rotate element around viewer z axis (the desired effect)
transform: translatex(-50%) translatey(-50%) rotatez(value);
would rotate element around z axis
.container { width: 200px; height: 200px; position: absolute; perspective: 10000px; left: 50vw; top: 50vh; transform: translatex(-50%) translatey(-50%); } .cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } .cube figure { margin: 0; width: 100%; height: 100%; display: block; position: absolute; border: 2px solid black; box-sizing: border-box; } .cube .front { transform: rotatey( 0deg ) translatez( 100px ); } .cube .back { transform: rotatex( 180deg ) translatez( 100px ); } .cube .right { transform: rotatey( 90deg ) translatez( 100px ); } .cube .left { transform: rotatey( -90deg ) translatez( 100px ); } .cube .top { transform: rotatex( 90deg ) translatez( 100px ); } .cube .bottom { transform: rotatex( -90deg ) translatez( 100px ); } .cube { transform: rotatey(35deg) rotatex(45deg); } .cube:hover { transition: 1s; transform:rotatez(60deg) rotatey(35deg) rotatex(45deg); }
<section class="container"> <div class="cube"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </section>
Comments
Post a Comment