我们要实现的效果
搭建html结构
代码语言：javascript复制<div class="main">
<div class="one">
<img src="imgs/huo1.jpg">
</div>
<div class="two">
<img src="imgs/gld2.jpg">
</div>
<div class="three">
<img src="imgs/gld3.jpg">
</div>
<div class="four">
<img src="imgs/gld4.jpg">
</div>
<div class="five">
<img src="imgs/ms1.jpg">
</div>
<div class="six">
<img src="imgs/ms2.jpg">
</div>
</div>基本样式
代码语言：javascript复制html{
perspective: 800px
}
.main{
width: 200px;
height: 200px;
background: #bfa;
margin: 100px auto;
}
.main > div{
width: 200px;
height: 200px;
opacity: .7;
position: absolute;
}
.main img{
width: 100%;
height: 200px;
vertical-align: top;
/*opacity: .7*/
}此时6张图片都粘贴在一起
我们通过旋转和平移将其分开，先设置盒子的左右两边的图片
代码语言：javascript复制.one{
transform:rotateY(90deg) translateZ(100px);
}
.two{
transform:rotateY(-90deg) translateZ(100px);
}
相信一般人都和我一样有点不理解 translateZ 为什么要用translateZ而不是translateX? 请记住一句话 当元素旋转的时候，其坐标系也会跟着旋转！
我们设置.one盒子 绕y轴旋转90度，此时坐标轴也会发生改变 原来的X会变成Z，所以这里我们使用了translateZ
了解这个特效后下面的就不难理解了，直接上代码 记住一点就是 当元素旋转的时候，其坐标系也会跟着旋转！
代码语言：javascript复制.one{
/*旋转的时候坐标系发生了改变 使用translateZ 此时x轴正对屏幕 而不是translateX*/
transform:rotateY(90deg) translateZ(100px);
}
.two{
transform:rotateY(-90deg) translateZ(100px);
}
.three{
transform:rotateX(90deg) translateZ(100px);
}
.four{
transform:rotateX(-90deg) translateZ(100px);
}
.five{
transform: rotateY(0deg) translateZ(100px);
}
.six{
transform: rotateY(180deg) translateZ(100px);
}接下来添加动画效果
代码语言：javascript复制@keyframes rotate{
from {
transform:rotateX(0) rotateZ(0);
}
to{
transform:rotateX(1turn) rotateZ(1turn);
}
}
.main{
width: 200px;
height: 200px;
background: #bfa;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotate 20s
/*position: relative;*/
}到此完成
代码没有多少，不过需要理解 当元素旋转的时候，其坐标系也会跟着旋转
