body,html {
	background:lavender;
}
.box {
	width:300px;
	height:300px;
	position:relative;
	transform-style:preserve-3d;
	margin:200px auto;
	animation:turn 20s infinite linear;
}
.box:hover {
	animation-duration:7s;
}
.box>div {
	width:290px;
	height:290px;
	position:absolute;
	border-radius:50px;
	border:1px solid #999;
	text-align:center;
	line-height:300px;
	color:#fff;
	font-size:80px;
	font-family:'微软雅黑';
	transition:all 1s linear;
	background:rgba(255,255,255,.9);
}
.left {
	transform:rotateY(-90deg) translateZ(150px);
}
.right {
	transform:rotateY(90deg) translateZ(150px);
}
.top {
	transform:rotateX(90deg) translateZ(150px);
}
.bottom {
	transform:rotateX(-90deg) translateZ(150px);
}
.before {
	transform:translateZ(150px);
}
.after {
	transform:translateZ(-150px);
}
@keyframes turn {
	from {
	transform:rotateX(0deg) rotateY(0deg);
}
to {
	transform:rotateX(360deg) rotateY(360deg);
}
}.box:hover .before {
	transform:translateZ(300px);
}
.box:hover .after {
	transform:translateZ(-300px);
}
.box:hover .left {
	transform:rotateY(-90deg) translateZ(300px)
}
.box:hover .right {
	transform:rotateY(90deg) translateZ(300px)
}
.box:hover .top {
	transform:rotateX(90deg) translateZ(300px)
}
.box:hover .bottom {
	transform:rotateX(-90deg) translateZ(300px)
}
span {
	width:50px;
	height:50px;
	border-radius:50%;
	background:#F77B7B;
	position:absolute;
}
.t1 {
	top:120px;
	left:120px;
}
.bt1,.bt2,.bt3 {
	left:85px;
}
.bt4,.bt5,.bt6 {
	left:150px;
}
.bt1,.bt4 {
	top:50px;
}
.bt2,.bt5 {
	top:120px;
}
.bt3,.bt6 {
	top:185px;
}
.l1,.l2 {
	top:120px;
}
.l1 {
	left:80px;
}
.l2 {
	left:150px;
}
.r1,.r2 {
	top:70px;
}
.r1,.r4 {
	left:70px;
}
.r4,.r5 {
	bottom:70px;
}
.r2,.r5 {
	right:70px;
}
.r3 {
	top:115px;
	left:115px;
}
.b1 {
	top:60px;
	left:185px;
}
.b2 {
	top:115px;
	left:115px;
}
.b3 {
	top:180px;
	left:45px;
}
.a1,.a2 {
	top:70px;
}
.a1,.a3 {
	left:70px;
}
.a3,.a4 {
	bottom:70px;
}
.a2,.a4 {
	right:70px;
}