* { margin:0px; padding:0px; } body { /*background:linear-gradient(to botttom,#c0392b,#16a085,#2980b9); */ background-color:#16a085; } .warp { height:100vh; display:flex; justify-content:center; align-items:center; } .cude { width:200px; height:200px; position:absolute; transform-style:preserve-3d; transform:rotateY(0deg) rotateX(-45deg) rotateZ(-45deg); animation:cude 8s linear infinite } .cude .side { /*!--. side 索引*/ width:100%; height:100%; position:absolute; box-sizing:border-box; border:1px solid #000; padding:10px; background-color:#fff; } .cude .side .min { width:100px; height:100px; position:absolute; box-sizing:border-box; border:1px solid #000; margin:50px auto; background-color:#1ff; } .cude .cude-front { transform:rotateY(0deg) translateZ(150px); } .cude .cude-back { transform:rotateY(180deg) translateZ(150px); } .cude .cude-left { transform:rotateY(-90deg) translateZ(150px); } .cude .cude-right { transform:rotateY(90deg) translateZ(150px); } .cude .cude-top { transform:rotateX(90deg) translateZ(150px); } .cude .cude-bottom { transform:rotateX(-90deg) translateZ(150px); } @keyframes cude { 0% { transform:rotateY(0deg) rotateX(-45deg) rotateZ(0deg); } 100% { transform:rotateY(0deg) rotateX(-45deg) rotateZ(360deg); } }