.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);
}