3D盒子

	* {
	margin:0px;
	padding:0px;
}
body {
	background:#666;
	width:100%;
	height:100%;
	overflow:hidden;
}
h1 {
	width:100%;
	text-align:center;
	color:white;
	font-size:50px;
}
.an {
	width:50px;
	height:50px;
	margin:auto;
	margin-top:200px;
	perspective:800px;
	position:relative;
	transform-style:preserve-3d;
}
.an-3d {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	animation:x 5s linear infinite;
}
.an-3d:nth-of-type(1)>div {
	width:50px;
	height:50px;
	position:absolute;
	top:0px;
	left:0px;
	transition:2s;
	opacity:0.3;
	box-shadow:0px 0px 10px 5px white;
	background:linear-gradient(pink,blue);
}
.an-3d:nth-of-type(2)>div {
	width:50px;
	height:50px;
	position:absolute;
	top:0px;
	left:0px;
	transition:2s;
	opacity:0.3;
	border-radius:50%;
	box-shadow:0px 0px 10px 5px white;
	background:radial-gradient(rgba(0,255,255,0) 10%,rgba(0,255,255,1) 65%);
}
.an-3d:nth-of-type(3)>div {
	width:200px;
	height:200px;
	position:absolute;
	top:-75px;
	left:-75px;
	box-shadow:0px 0px 10px 5px white;
	box-sizing:border-box;
	transition:2s;
	opacity:0.5;
	border-radius:20px;
	border:10px solid black;
	background:rgba(0,0,0,0.2);
}
.an-3d:nth-of-type(4)>div {
	width:100px;
	height:100px;
	position:absolute;
	top:-50px;
	box-sizing:border-box;
	left:-50px;
	transition:2s;
	opacity:0.5;
	background:radial-gradient(rgba(0,255,255,0) 10%,rgba(0,255,255,1) 65%);
	border-radius:50%;
	box-shadow:0px 0px 10px 5px white;
}
.an-3d:nth-of-type(1)>div:nth-of-type(1) {
	transform:rotate(0deg) translateZ(25px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(2) {
	transform:rotateX(180deg) translateZ(25px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(3) {
	transform:rotateY(-90deg) translateZ(25px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(4) {
	transform:rotateY(90deg) translateZ(25px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(5) {
	transform:rotateX(90deg) translateZ(25px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(6) {
	transform:rotateX(-90deg) translateZ(25px);
}
/***/
		  .an-3d:nth-of-type(2)>div:nth-of-type(1) {
	transform:rotate(0deg) translateZ(75px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(2) {
	transform:rotateX(180deg) translateZ(75px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(3) {
	transform:rotateY(-90deg) translateZ(75px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(4) {
	transform:rotateY(90deg) translateZ(75px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(5) {
	transform:rotateX(90deg) translateZ(75px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(6) {
	transform:rotateX(-90deg) translateZ(75px);
}
/***/
		  .an-3d:nth-of-type(3)>div:nth-of-type(1) {
	transform:rotate(0deg) translateZ(100px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(2) {
	transform:rotateX(180deg) translateZ(100px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(3) {
	transform:rotateY(-90deg) translateZ(100px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(4) {
	transform:rotateY(90deg) translateZ(100px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(5) {
	transform:rotateX(90deg) translateZ(100px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(6) {
	transform:rotateX(-90deg) translateZ(100px);
}
/***/
		  .an-3d:nth-of-type(4)>div:nth-of-type(1) {
	transform:rotate(0deg) translateZ(200px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(2) {
	transform:rotateX(180deg) translateZ(200px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(3) {
	transform:rotateY(-90deg) translateZ(200px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(4) {
	transform:rotateY(90deg) translateZ(200px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(5) {
	transform:rotateX(90deg) translateZ(200px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(6) {
	transform:rotateX(-90deg) translateZ(200px);
}
/***/
		   .an:hover .an-3d:nth-of-type(3)>div:nth-of-type(1) {
	transform:rotate(0deg) translateZ(250px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(2) {
	transform:rotateX(180deg) translateZ(250px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(3) {
	transform:rotateY(-90deg) translateZ(250px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(4) {
	transform:rotateY(90deg) translateZ(250px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(5) {
	transform:rotateX(90deg) translateZ(250px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(6) {
	transform:rotateX(-90deg) translateZ(250px) scale(1.5);
}
@keyframes x {
	from {
	transform:rotate(0deg) rotateX(0deg) rotateY(0deg);
}
to {
	transform:rotate(360deg) rotateX(360deg) rotateY(360deg)
}
}