margin: 500px auto;
/* 代码写给父级，子元素开启立体空间 */
transform-style: preserve-3d;
transition: all 2s;
animation: rotate 10s linear forwards;
}
/* 给每个div设置大小、背景图片和位置 */
section div:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/1.jpg);
transform: translateZ(300px);
}
section div:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/2.jpg);
transform: translateX(300px) rotateY(90deg);
}
section div:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/3.jpg);
transform: translateZ(-300px) rotateY(180deg);
}
section div:nth-child(4) {
<