点击效果图查看代码运行动态效果 ，点击查看总代码
想要通过 CSS 的 3D 变换和动画属性，创建一个由六张任意图片组成的 3D 旋转效果
第一步 搭建
这部可以看作是给元素（这里的元素是为我们要添加的照片），搭建一个住所，即容器
在body部分添加六个空盒子，盒子内放照片，外部添加section，使六位为一体
第二部 构造
构造内部的结构，给section部分修饰，以自己想要的效果为准
需要注意的是3d效果是必须添加的，不然后续子元素无法保持在三维空间的位置
这里section元素外边是body，如果
窗口的宽度，或者根据其在文档流中的位置和周围元素的影响而变化。使布局不可控
所以section必须给到高度和宽度，不明确控制宽高后续可能会使这些3d效果难以预测
section {
position: relative;
width: 261px;
height: 450px;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotate 8s linear infinite;
}
position: relative;：相对定位，为内部的
给盒子高和宽属性值设为100%，使每个
“position: absolute; top: 0; left: 0;” 的作用是使元素脱离标准流，并精确地将其定位在section元素的左上角，为实现特定的布局和视觉效果提供了精确的控制手段。是必需条件
section div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.9;
}
第三步 旋转
使用@keyframes 规则创建一个动画，自定义名称为rotate
@keyframes rotate：定义了动画的关键帧，从 transform: rotateY(0);（初始状态不旋转）
到 transform: rotateY(360deg);（绕 Y 轴旋转 360 度），实现了 3D 物体的持续旋转效果。
@keyframes rotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
第四步 平移
section div:nth-child(n)：通过选择器分别为六个子元素
rotateY和 translateZ 值，使它们在 3D 空间中呈扇形分布
俯视图如图二，红色线段为照片位置
section div:nth-child(1) {
transform: translateZ(300px);
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px)
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
可以根据需要更改盒子及照片的数量，更改旋转角度和平移位置
总代码
body { perspective: 1500px; }：为整个页面设置透视效果，值为 1500px，这是实现 3D 效果的关键设置，它决定了 3D 场景的深度。
总结
通过定义CSS样式与关键帧动画，一个包含六个相同图片的
仅供参考