@keyframes aaa-ani { from { transform: rotateX(-10deg)rotateY(0deg); } to { transform: rotateX(-10deg)rotateY(360deg); } } body { /*背景为黑色*/ background-color:black ; } #box2 { border: 0px solid white; height: 250px; width: 250px; position: fixed; left: calc(50% - 125px); top: calc(50% - 125px); transform-style: preserve-3d; transform: rotateX(10deg) rotateY(10deg); animation-name: aaa-ani; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } #box2>img { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } #box2>img:nth-child(1) { transform: translateZ(125px); } #box2>img:nth-child(2) { transform: rotateY(180deg) translateZ(125px); } #box2>img:nth-child(3) { transform: rotateY(90deg) translateZ(125px); } #box2>img:nth-child(4) { transform: rotateY(270deg) translateZ(125px); } #box2>img:nth-child(5) { transform: rotateX(270deg) translateZ(125px); } #box2>img:nth-child(6) { transform: rotateX(90deg) translateZ(125px); } #box2>img:nth-child(7) { transform: scale3d(0.5, 0.5, 0.5) translateZ(125px); } #box2>img:nth-child(8) { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg) translateZ(125px); } #box2>img:nth-child(9) { transform: scale3d(0.5, 0.5, 0.5) rotateY(90deg) translateZ(125px); } #box2>img:nth-child(10) { transform: scale3d(0.5, 0.5, 0.5) rotateY(270deg) translateZ(125px); } } #box2>img:nth-child(11) { transform: scale3d(0.5, 0.5, 0.5) rotateX(270deg) translateZ(125px); } #box2>img:nth-child(6) { transform: scale3d(0.5, 0.5, 0.5) transform: rotateX(90deg) translateZ(125px); } #box2>img:nth-child(-n+12) { opacity: 0.4; }