第二天

/* @keyframes 动画名 {

关键帧

} */

@keyframes roll {

from {

transform: rotateX(0) rotateY(0) rotateZ(0);

to {
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

}

}

• {

margin: 0;

padding: 0;

}

div {

width: 200px;

height: 200px;

background-color: skyblue;

line-height: 200px;

text-align: center;

color: white;

font-size: 100px;

position: absolute;

}

.wrap {

padding: 100px;

background-color: transparent;

transform-style: preserve-3d;

/开启3D效果/

/* animation: 动画名 动画执行时间 [动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧] */

animation: roll 8s linear infinite;

}

.wrap div:nth-of-type(1) {

transform: rotateY(-90deg) translateZ(100px);

}

.wrap div:nth-of-type(2) {

transform: rotateY(90deg) translateZ(100px);

background-color: tomato;

}

.wrap div:nth-of-type(3) {

transform: rotateX(90deg) translateZ(100px);

background-color: plum;

}

.wrap div:nth-of-type(4) {

transform: rotateX(-90deg) translateZ(100px);

background-color: greenyellow;

}

.wrap div:nth-of-type(5) {

transform: translateZ(100px);

background-color: gold;

}

.wrap div:nth-of-type(6) {

transform: rotateX(180deg) translateZ(100px);

background-color: hotpink;

}

.img {

width: 10px;

height: 10px;

}