css3动画立体旋转属性 |鼠标移动 css

其中的立体旋转属性是页面动画效果中常用的一种，可以使元素在三维空间中旋转。

下面这段代码演示了如何通过CSS3动画来创建一个立方体旋转效果：

.cube {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto 0;
transform-style: preserve-3d;
animation: rotate 6s linear infinite;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 48px;
color: #333;
line-height: 200px;
animation: rotate 6s linear infinite reverse;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
@keyframes rotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}

上述代码中的.cube是一个容器元素，内部有六个面，分别是.front,.back,.left,.right,.top,.bottom。每个面都有自己的类名，并通过 transform 属性实现在三维空间中的位置与旋转。

通过关键帧动画rotate，可以实现这个立方体元素在6秒钟内不停地沿Y轴旋转360度。

因为大家在.cube中设置了transform-style: preserve-3d，所以其子元素都将遵循“子节点继承父节点属性”的规则，继承其3D效果属性。

这就是如何使用CSS3动画的立体旋转属性来创建一个简单的立方体旋转效果。