CSS3D魔法——旋转魔方，web开发新技术

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) {

<