css3d 正方形

perspective:500   属性定义 3D 元素距视图的距离，以像素计

transform-style:preserve-3d;  transform--style属性指定嵌套元素是怎样在三维空间中呈现。

rotateY()   Y轴旋转

translate3d(x,y,z)  平移   参数可以是px 、百分比  表示平移距离 

 

展示图

 

<div class="container">
			<div class="box">
				<div class="con">
					<div class="surface1 s-i s-n"></div>
					<div class="surface2 s-i s-n"></div>
					<div class="surface3 s-i s-n"></div>
				
					
					<div class="surface4 s-i s-n"></div>
		
					<div class="surface5 s-i s-n"></div>
					
					<div class="surface7 s-i s-n"></div>
					
				</div>
			</div>
		</div>

* {
	margin:0;
	padding:0;
	list-style:none;
	box-sizing:border-box;
}
.container {
	width:200px;
	height:200px;
	margin: 200px auto;
}
.box {
	perspective:500px;
	position:relative;
}
.con{
	width: 200px;
	height: 200px;
	transform-style:preserve-3d;
	animation:run 20s infinite;
}
.s-i{
	width:200px;
	height:200px;
	position:absolute;
	text-align:center;
	line-height:200px;
	font-size:32px;
}
.surface1{
	background: rgba(185,202,106,0.5);
	-webkit-transform: translate3d(0,0,100px)
}
.surface2{
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(221,173,98,0.5);
	-webkit-transform: translate3d(-50%,0,0px) rotateY(90deg);
}
.surface3{
	background: rgba(244,61,12,0.5);
	-webkit-transform: translate3d(50%,0,0px) rotateY(90deg);
}




.surface4{
	background: rgba(12,181,244,0.5);
	-webkit-transform: translate3d(0,-50%,0px) rotateX(90deg);
}
.surface5{
	background: rgba(138,12,244,0.5);
	-webkit-transform: translate3d(0,-50%,0px) rotateX(90deg);
}



.surface7{
	background: rgba(32,159,119,0.5);
	-webkit-transform:translate3d(0,0,-100px);
} 

@keyframes run {
	0% {
		transform:rotateY(0) rotateX(0);
	}
	25% {
		transform:rotateY(360deg) rotateX(0);
	}
	50% {
		transform:rotateX(720deg) rotateY(0);
	}
	75%{
		transform:rotateY(720deg) rotateX(360deg);
	}
	100%{
		transform:rotateX(720deg) rotateY(720deg);
	}
}