Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3的旋转木马效果

0