0

キューブを左から右に、またはその逆に回転させると、コンテナーのサイズに収まります。しかし、上からボタンに回転させると、収まりません。

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

この質問の仕方がわかりません。皆様のご理解を賜りますようお願い申し上げます。 私のコードペン

4

1 に答える 1

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

しかし、これの1つ

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

サインが変わっていることに注意してください！

于 2013-10-06T20:21:17.847 に答える