.main { width:200px; height:200px; position:relative; margin:30px auto; animation:move 10s infinite; transform-style:preserve-3d } .main div { width:200px; height:200px; opacity:0.5; position:absolute; left:0px; top:0px; } .a1 { background:blue; } .a2 { background:yellow; } .a3 { background:green; } .a4 { background:orangered; } .a5 { background:pink; } .a6 { background:black; } .a1 { transform:translateZ(100px); } .a2 { transform:translateZ(-100px); } .a3 { transform:rotateY(-90deg) translateZ(100px); } .a4 { transform:rotateY(90deg) translateZ(100px); } .a5 { transform:rotateX(90deg) translateZ(100px); } .a6 { transform:rotateX(-90deg) translateZ(100px); } @keyframes move { from { transfrom:rotateY(0deg) rotateX(0deg); } to { transform:rotateY(720deg) rotateX(360deg); }
更新时间:2019-12-19 00:52:47