.box { width:800px; height:800px; /*background:blueviolet; */ transform-style:preserve-3d; transform:rotateX(-10deg); animation:aa 10s linear infinite; margin:0 auto; border-radius:50%; } .img { width:118px; height:118px; line-height:118px; text-align:center; line-height:118px; box-shadow:0 0 20px rgba(0,0,0,.9)inset; background:cyan; transform:rotateY(0deg); position:absolute; top:160px; left:300px; } @keyframes aa { 0% { transform:rotateX(-20deg) rotateY(0deg); } 10% { transform:rotateX(-20deg) rotateY(36deg); } 20% { transform:rotateX(-20deg) rotateY(72deg); } 30% { transform:rotateX(-20deg) rotateY(108deg); } 40% { transform:rotateX(-20deg) rotateY(144deg); } 50% { transform:rotateX(-20deg) rotateY(180deg); } 60% { transform:rotateX(-20deg) rotateY(216deg); } 70% { transform:rotateX(-20deg) rotateY(252deg); } 80% { transform:rotateX(-20deg) rotateY(288deg); } 90% { transform:rotateX(-20deg) rotateY(324deg); } 100% { transform:rotateX(-20deg) rotateY(360deg); } }.img1 { transform:rotateY(0deg) translateZ(300px); } .img2 { transform:rotateY(40deg) translateZ(300px); } .img3 { transform:rotateY(80deg) translateZ(300px); } .img4 { transform:rotateY(120deg) translateZ(300px); } .img5 { transform:rotateY(160deg) translateZ(300px); } .img6 { transform:rotateY(200deg) translateZ(300px); } .img7 { transform:rotateY(240deg) translateZ(300px); } .img8 { transform:rotateY(280deg) translateZ(300px); } .img9 { transform:rotateY(320deg) translateZ(300px); }