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