1

HTMLとCSSだけを使用して回転するサイコロを作成しようとしています。私は立方体の形をしており、マウスオーバーで左に45度回転します。これは、3d css アニメーションでの私の最初の経験です。私はチュートリアルに従っていましたが、コードは説明されていませんでした。CSS コード:

#container{
perspective:800;
perspective-orign:50% 110px;
-webkit-perspective:800;
-webkit-perspective-orign:50% 110px;
}
#cube{
position:relative;
margin:0 auto;
height:400px;
-webkit-transform:-webkit-transform 8s linear;
-webkit-transform-style: preserve-3d;
-webkit-transform:rotateY(-45deg);
}
#cube:hover{
-webkit-transform:rotateY(360deg);
-webkit-transform:rotateX(360deg);
}
@keyfremes myRotate{
from{left:100;}
to{left:100;}
}
.face{
position:absolute;
height:360px;
width:360px;
padding:20px;
background-color:rgba(50 ,50 ,50 , 0.7)
}
#cube .f1{
-webkit-transform:rotateX(90deg) translateZ(200px);
}
#cube .f2{
-webkit-transform:translateZ(200px);
}
#cube .f3{
-webkit-transform:rotateY(90deg) translateZ(200px);
}
#cube .f4{
-webkit-transform:rotateY(180deg) translateZ(200px);
}
#cube .f5{
-webkit-transform:rotateY(90deg) translateZ(200px);
}
#cube .f6{
-webkit-transform:rotateX(90deg) translateZ(200px) rotate(180deg);
}

HTML

<body>
    <div id="container">
        <div id="cube">
             <img src="images/1.png" class="face f1" />
            <img src="images/2.png" class="face f2" />
            <img src="images/3.png" class="face f3" />
            <img src="images/4.png" class="face f4" />
            <img src="images/5.png" class="face f5" />
            <img src="images/6.png" class="face f6" />
        </div><!--close cube-->
    </div><!--close container-->
</body>

どんな助けも適用されます

4

0 に答える 0