html - 当我沿 x 轴旋转元素时，尺寸会增加吗？

Question

当我从左向右或从左向右旋转我的立方体时，它适合容器的大小。但是当我将它从顶部旋转到按钮时，它不适合。

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;
}

上面的代码是从左到右旋转的。 从上到下旋转:-

.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);
    }

我不知道怎么问这个问题。希望大家能够理解。 My codePen

Answer 1

你有一个符号问题(是的，我知道，这很棘手)

对于这个 y 旋转

.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);
}

等效项不是您使用的那个:

.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);
}    

.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);
}

注意符号正在改变!