html - When i rotate an element along x axis size increases? -
when rotate cube left right or vice-verse, fits size of container. when rotate top button doesn't fits.
html : -
<div class="scene"> <div class="cube"> <div class="cube-face cube-face-front"><img src="http://imageshack.us/a/img833/6500/dp5e.jpg" alt="images"> </div> <div class="cube-face cube-face-back"> <img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt="images"> </div> <div class="cube-face cube-face-left"> <img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt="images"> </div> <div class="cube-face cube-face-right"> <img src="http://imageshack.us/a/img18/6017/rue6.jpg" alt="images"> </div> <div class="cube-face cube-face-top"> <img src="http://imageshack.us/a/img163/6131/ld3f.jpg" alt="images"> </div> <div class="cube-face cube-face-bottom"> <img src="http://imageshack.us/a/img838/4102/h0nv.jpg" alt="images"> </div> </div> </div> css : -
body{ width:960px; margin:100px auto; } .scene{ margin-top:50px; width:300px; height:300px; /*perspective*/ -webkit-perspective:3000px; -moz-perspective:3000px; -ms-perspective:3000px; -o-perspective:3000px; perspective:3000px; border:5px solid black; } .cube{ cursor:pointer; width:inherit; height:inherit; position:relative; /*transition*/ -webkit-transition:all 2s; -moz-transition:all 2s; -o-transition:all 2s; transition:all 2s; /*transform-style*/ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; _-webkit-transform:rotatex(-15deg) rotatey(-15deg); } .cube-face{ width:inherit; height:inherit; position:absolute; opacity:0.95; } .cube-face-front{ /*transform*/ -webkit-transform:translate3d(0,0,0px); -moz-transform:translate3d(0,0,0px); -ms-transform:translate3d(0,0,0px); -o-transform:translate3d(0,0,0px); transform:translate3d(0,0,0px); } .cube-face-back{ /*transform*/ -webkit-transform:rotatey(180deg) translate3d(0,0,150px); -moz-transform:rotatey(180deg) translate3d(0,0,150px); -ms-transform:rotatey(180deg) translate3d(0,0,150px); -o-transform:rotatey(180deg) translate3d(0,0,150px); transform:rotatey(180deg) translate3d(0,0,150px); } .cube-face-left{ /*transform*/ -webkit-transform:rotatey(90deg) translate3d(150px,0,150px); -moz-transform:rotatey(90deg) translate3d(150px,0,150px); -ms-transform:rotatey(90deg) translate3d(150px,0,150px); -o-transform:rotatey(90deg) translate3d(150px,0,150px); transform:rotatey(90deg) translate3d(150px,0,150px); } .cube-face-right{ /*transform*/ -webkit-transform:rotatey(-90deg) translate3d(-150px,0,150px); -moz-transform:rotatey(-90deg) translate3d(-150px,0,150px); -ms-transform:rotatey(-90deg) translate3d(-150px,0,150px); -o-transform:rotatey(-90deg) translate3d(-150px,0,150px); transform:rotatey(-90deg) translate3d(-150px,0,150px); } .cube-face-top{ /*transform*/ -webkit-transform:rotatex(90deg) translate3d(0,-150px,150px); -moz-transform:rotatex(90deg) translate3d(0,-150px,150px); -ms-transform:rotatex(90deg) translate3d(0,-150px,150px); -o-transform:rotatex(90deg) translate3d(0,-150px,150px); transform:rotatex(90deg) translate3d(0,-150px,150px); } .cube-face-bottom{ /*transform*/ -webkit-transform:rotatex(-90deg) translate3d(0,150px,150px); -moz-transform:rotatex(-90deg) translate3d(0,150px,150px); -ms-transform:rotatex(-90deg) translate3d(0,150px,150px); -o-transform:rotatex(-90deg) translate3d(0,150px,150px); transform:rotatex(-90deg) translate3d(0,150px,150px); } .cube:hover{ /*transform*/ -webkit-transform:rotatey(-90deg) translate3d(-150px,-0,150px); -moz-transform:rotatey(-90deg) translate3d(-150px,-0,150px); -ms-transform:rotatey(-90deg) translate3d(-150px,-0,150px); -o-transform:rotatey(-90deg) translate3d(-150px,-0,150px); transform:rotatey(-90deg) translate3d(-150px,0,150px); } img{ width:inherit; height:inherit; } the above code rotates left right. rotating top bottom :-
.cube:hover{ /*transform*/ -webkit-transform:rotatex(-90deg) translate3d(0,-150px,150px); -moz-transform:rotatex(-90deg) translate3d(0,-150px,150px); -ms-transform:rotatex(-90deg) translate3d(0,-150px,150px); -o-transform:rotatex(-90deg) translate3d(0,-150px,150px); transform:rotatex(-90deg) translate3d(0,-150px,150px); } i don't know how ask question. hope guys understand. my codepen
you have sign problem (yes, know, tricky)
for y rotation
.cube:hover{ /*transform*/ -webkit-transform:rotatey(-90deg) translate3d(-150px,-0,150px); -moz-transform:rotatey(-90deg) translate3d(-150px,-0,150px); -ms-transform:rotatey(-90deg) translate3d(-150px,-0,150px); -o-transform:rotatey(-90deg) translate3d(-150px,-0,150px); transform:rotatey(-90deg) translate3d(-150px,0,150px); } the equivalent not 1 use:
.cube:hover{ -webkit-transform:rotatex(-90deg) translate3d(0,-150px,150px); -moz-transform:rotatex(-90deg) translate3d(0,-150px,150px); -ms-transform:rotatex(-90deg) translate3d(0,-150px,150px); -o-transform:rotatex(-90deg) translate3d(0,-150px,150px); transform:rotatex(-90deg) translate3d(0,-150px,150px); } but 1 of this
.cube:hover{ -webkit-transform:rotatex(90deg) translate3d(0,-150px,150px); -moz-transform:rotatex(90deg) translate3d(0,-150px,150px); -ms-transform:rotatex(90deg) translate3d(0,-150px,150px); -o-transform:rotatex(90deg) translate3d(0,-150px,150px); transform:rotatex(90deg) translate3d(0,-150px,150px); } .cube:hover{ -webkit-transform:rotatex(-90deg) translate3d(0,150px,150px); -moz-transform:rotatex(-90deg) translate3d(0,150px,150px); -ms-transform:rotatex(-90deg) translate3d(0,150px,150px); -o-transform:rotatex(-90deg) translate3d(0,150px,150px); transform:rotatex(-90deg) translate3d(0,150px,150px); } notice sign changing !
Comments
Post a Comment