小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

主要实现一个球体旋转的效果,所谓的旋转球体，就是让每条线相聚一定距离，然后旋转，在设置动画，运动起来看着就像球体旋转一样。

绘制

容器

我们需要准备一个容器来渲染这个球体。我们需要景深元素，需要线的元素等。

<div class="eyes">
	<div class="box">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<div class="div5"></div>
	</div>
</div>

设置样式

在这些dom基础上，我们给它添加一些样式，让他们灵活起来。

景深

景深是指相机对焦点前后相对清晰的成像范围。在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成像的距离范围。虽然透镜只能够将光聚 到某一固定的距离，远离此点则会逐渐模糊，但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段距离称之为景深。当焦点设在超焦距处时，景深 会从超焦距的一半延伸到无限远，对一个固定的光圈值来说，这是最大的景深。

说白了就是提供立体效果的。

.eyes{
	perspective: 1200px;
	perspective-origin: 50% 50%;
	background-color: black;
}
.box{
	transform-style: preserve-3d;
	-webkit-animation:wei 30s infinite linear;
	//动画设置animation
	margin:100px auto;
	position: relative;
	width: 600px;
	height: 600px;
}

间轴线设置

.box:before{
	content: " ";
	width: 600px;
	border:1px solid gold;
	display: block;
	transform: rotateZ(90deg) translateX(300PX);
}

五条线的设置

.box >div{
	width: 300px;
	height:300px;
	border:2px solid white;
	position: absolute;
	top: 150px;
	left: 150px;
	border-radius: 50%;
}
.div1{
	transform: rotateY(0deg);
}
.div2{
	transform: rotateY(36deg);
}
.div3{
	transform: rotateY(72deg);
}
.div4{
	transform: rotateY(108deg);
}
.div5{
	transform: rotateY(144deg);
}

开启动画

@-webkit-keyframes wei{
	from{
		transform: rotateZ(-30deg) rotateY(0deg);
	}
	to{
		transform: rotateZ(-30deg) rotateY(3600deg);
	}
}