CSS之动画及2D、3D转换
/* 定义一个简单的3D旋转动画 */
@keyframes rotate3d {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
/* 应用动画到一个元素上 */
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
/* 开启3D空间 */
perspective: 500px;
/* 应用动画 */
animation: rotate3d 5s infinite linear;
}这段代码定义了一个名为rotate3d的3D旋转动画，并将其应用到拥有box类的HTML元素上。开启了3D空间，使元素在3维空间内进行旋转，从而创建了一个动态的3D效果。
评论已关闭