* { margin:0; padding:0; } .box { width:500px; height:500px; position:relative; margin:200px auto; transform-style:preserve-3d; /*transition:20s; */ transform-origin:50% 50%; perspective:500; animation:abc 10s infinite; } @keyframes abc { from { transform:rotateY(0deg) rotateX(0deg) rotate(0deg); } to { transform:rotateY(360deg) rotateX(360deg) rotate(360deg); } }.box div { width:500px; height:500px; /*border:5px red solid; */ position:absolute; box-sizing:border-box; /*transform-origin:50% 50%; */ opacity:0.5; } .box div:nth-child(1) { transform:translateX(250px)rotateY(90deg); background:yellow; } .box div:nth-child(2) { transform:translateX(-250px)rotateY(90deg); background:darkred; } .box div:nth-child(3) { transform:translateY(250px)rotateX(90deg); background:blueviolet; } .box div:nth-child(4) { transform:translateY(-250px)rotateX(90deg); background:gold; } .box div:nth-child(5) { transform:translateZ(250px); background:green; } .box div:nth-child(6) { transform:translateZ(-250px); background:lightblue; } .box div:nth-child(7) { transform:translateZ(-250px); width:500px; height:500px; border-radius:50%; background:lightblue; }
更新时间:2021-05-25 23:07:37