/*定义一个动画*/ @keyframes aaa-ani { from { transform: rotateX(-10deg)rotateY(0deg); } to { transform: rotateX(-10deg)rotateY(360deg); } } body { /*背景为黑色*/ background-color: black; } /*#box相当于id="box"*/ #box { border: 0px solid white; height: 250px; width: 200px; /*固定定位，以浏览器为标准进行定位*/ position: fixed; left: calc(50% - 125px); top: calc(50% - 100px); /*把盒子里变成一个3d盒子*/ transform-style: preserve-3d; transform: rotateX(-10deg); /*使用刚刚定义好的动画，动画名称*/ animation-name: aaa-ani; animation-duration: 2s; [] animation-iteration-count: infinite; animation-timing-function: linear; } #box>img { width: 100%; height: 100%; /*绝对定位，以父级为标准进行定位*/ position: absolute; left: 0px; top: 0px; box-shadow: 0px 0px 20px white; } /*第一张图片*/ #box>img:nth-child(1) { transform: rotateY(30deg) translateZ(600px); } #box>img:nth-child(2) { transform: rotateY(60deg) translateZ(600px) } #box>img:nth-child(3) { transform: rotateY(90deg) translateZ(600px) } #box>img:nth-child(4) { transform: rotateY(120deg) translateZ(600px) } #box>img:nth-child(5) { transform: rotateY(150deg) translateZ(600px) } #box>img:nth-child(6) { transform: rotateY(180deg) translateZ(600px) } #box>img:nth-child(7) { transform: rotateY(210deg) translateZ(600px) } #box>img:nth-child(8) { transform: rotateY(240deg) translateZ(600px) } #box>img:nth-child(9) { transform: rotateY(270deg) translateZ(600px) } #box>img:nth-child(10) { transform: rotateY(300deg) translateZ(600px) } #box>img:nth-child(11) { transform: rotateY(330deg) translateZ(600px) } #box>img:nth-child(12) { transform: rotateY(360deg) translateZ(600px) }

< !--插入图片-->