css动画旋转立体效果图 |css3 h5 特效网

.box {
position: relative;
perspective: 800px;
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.box div:nth-child(1) {
z-index: 10;
transform: rotateY(-60deg) translateZ(50px);
}
.box div:nth-child(2) {
transform: rotateY(0deg) translateZ(50px);
}
.box div:nth-child(3) {
transform: rotateY(60deg) translateZ(50px);
}

首先，大家需要将容器设为相对定位，然后设置透视属性 perspective。接着，大家对每一个元素使用 transform-style: preserve-3d 接受其单独的空间坐标系。紧接着，大家使用 transform: rotateY 进行水平旋转多个不同位置的 div。最后，大家添加 transition 属性进行动画的过渡效果。

在 HTML 代码中，大家只需要将三个不同的 div 放置于容器内，并按照不同的角度进行旋转即可。下面是 HTML 代码：

内容一
内容二
内容三

通过上述步骤，大家就可以实现 CSS 动画旋转立体效果图，并且可以在其中添加图像、文本、按钮等元素，为网页增添趣味和魅力。