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