* {
margin:0;
padding:0;
}
body {
background-color:#000;
}
.container {
position:relative;
width:200px;
margin:100px auto;
transform-style:preserve-3d;
transform:rotateX(-15deg);
/* animation:name duration timing-function delay iteration-count direction fill-mode;
*/
/* name duration timing-function
动画的名字 动画过程时间 播放速度
delay iteration-count direction fill-mode;
*/
/* 延时时间 1 -2- 4 次 运动的方向 动画播放完结后的状态 */
animation-name:move;
animation-duration:4s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes move {
from {
transform:rotateX(-15deg) rotateY(0deg);
}
to {
transform:rotateX(-15deg) rotateY(360deg);
}
}.container div {
position:absolute;
left:0;
top:0;
}
img {
width:200px;
height:280px;
}
.container div:nth-last-of-type(1) {
transform:rotateY(0deg) translateZ(200px);
}
.container div:nth-last-of-type(2) {
transform:rotateY(60deg) translateZ(200px);
}
.container div:nth-last-of-type(3) {
transform:rotateY(120deg) translateZ(200px);
}
.container div:nth-last-of-type(4) {
transform:rotateY(180deg) translateZ(200px);
}
.container div:nth-last-of-type(5) {
transform:rotateY(240deg) translateZ(200px);
}
.container div:nth-last-of-type(6) {
transform:rotateY(300deg) translateZ(200px);
}
更新时间:2022-12-02 23:42:05