Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background:url("images/timgq.jpg");
}
.wrap {
	width:800px;
	height:800px;
	margin:60px auto;
	position:relative;
}
.po {
	position:absolute;
	display:inline-block;
	text-align:center;
	vertical-align:middle;
}
.sun {
	width:100px;
	height:100px;
	border-radius:50%;
	background:url("images/sun1.jpg") no-repeat;
	background-size:cover;
	top:350px;
	left:350px;
}
.sun1 {
	width:200px;
	height:200px;
	border-radius:50%;
	border:1px dashed black;
	top:300px;
	left:300px;
}
.sun2 {
	width:300px;
	height:300px;
	border-radius:50%;
	border:1px dashed grey;
	top:250px;
	left:250px;
}
.sun3 {
	width:400px;
	height:400px;
	border-radius:50%;
	border:1px dashed black;
	top:200px;
	left:200px;
}
.sun4 {
	width:500px;
	height:500px;
	border-radius:50%;
	border:1px dashed grey;
	top:150px;
	left:150px;
}
.sun5 {
	width:600px;
	height:600px;
	border-radius:50%;
	border:1px dashed black;
	top:100px;
	left:100px;
}
.sun6 {
	width:700px;
	height:700px;
	border-radius:50%;
	border:1px dashed grey;
	top:50px;
	left:50px;
}
.sun7 {
	width:800px;
	height:800px;
	border-radius:50%;
	border:1px dashed black;
	top:0;
	left:0;
}
.sun8 {
	width:900px;
	height:900px;
	border-radius:50%;
	border:1px dashed grey;
	top:-50px;
	left:-50px;
}
.er1 {
	transform-style:preserve-3d;
	perspective:600px;
}
.er1 img {
	width:30px;
	height:30px;
	border-radius:50%;
	position:absolute;
	top:85px;
	left:-15px;
	transform-origin:115px 15px;
	transition:all 1s linear;
}
.er2 img {
	width:40px;
	height:40px;
	border-radius:50%;
	position:absolute;
	top:125px;
	left:-20px;
	transform-origin:171px 15px;
	transition:all 1s linear;
}
.er3 img {
	width:50px;
	height:50px;
	border-radius:50%;
	position:absolute;
	top:180px;
	left:-20px;
	transform-origin:220px 15px;
	transition:all 1s;
}
.er4 img {
	width:40px;
	height:40px;
	position:absolute;
	top:230px;
	left:-20px;
	border-radius:50%;
	transform-origin:270px 15px;
	transition:all 1s;
}
.er5 img {
	width:40px;
	height:40px;
	border-radius:50%;
	position:absolute;
	top:280px;
	left:-20px;
	transform-origin:320px 15px;
	transition:all 1s;
}
.er6 img {
	width:40px;
	height:40px;
	position:absolute;
	top:330px;
	left:-20px;
	border-radius:50%;
	transform-origin:370px 15px;
	transition:all 1s;
}
.er7 img {
	width:40px;
	height:40px;
	position:absolute;
	top:380px;
	left:-20px;
	border-radius:50%;
	transform-origin:420px 15px;
	transition:all 1s;
}
.er8 img {
	width:40px;
	height:40px;
	position:absolute;
	top:430px;
	left:-20px;
	border-radius:50%;
	transform-origin:470px 15px;
	transition:all 1s linear;
}
.roll1 {
	animation:roll 7.5s linear infinite;
}
.roll2 {
	animation:roll 18s linear infinite;
}
.roll3 {
	animation:roll 30s linear infinite;
}
.roll4 {
	animation:roll 54s linear infinite;
}
.roll5 {
	animation:roll 354s linear infinite;
}
.roll6 {
	animation:roll 870s linear infinite;
}
.roll7 {
	animation:roll 2520s linear infinite;
}
.roll8 {
	animation:roll 4950s linear infinite;
}
@keyframes roll {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}

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

太阳系行星旋转图CCS3

transform-style: preserve-3d;perspective: 600px;3d动画前:需要设置3d场景,以及景深效果行星旋转时应该要设置她的旋转中心transform-origin为太阳

0