立方体

用CSS的知识做一个立体的旋转的立方体。

<div id="cubic">
		<div id="main">
			<div id="box">
				<div id="top">上</div>
				<div id="bottom">下</div>
				<div id="left">左</div>
				<div id="right">右</div>
				<div id="front">前</div>
				<div id="later">后</div>
		</div>
	</div>
</div>

通过transform的3D变换，空间旋转，空间移动，达到立体效果。必须添加transform-style:preserve-3d，这样才能达到3D视觉效果。

@charset "utf-8";
*{
	margin: 0;
	padding: 0;
}
#cubic,#main,#box,#box>div{
	width: 16rem;
	height: 16rem;
	margin: 0 auto;
	line-height: 16rem;
	text-align: center;
	font-size:4rem;
	font-weight: 1.5rem;
}
#cubic{
		margin: 20% auto;
		transform-style: preserve-3d;
		animation: move2 4s linear alternate infinite;
}
@keyframes move2{
	from{
		transform: rotateY(0) ;
	}
	to{
		transform: rotateY(360deg) ;
	}
}
#main{
	transform-style: preserve-3d;
	transform:  rotateY(-25deg);
}
#box{
	transform-style: preserve-3d;
	transform: rotateX(-35deg);
	position: relative;
}
#box div{
	transform-style: preserve-3d;
	position: absolute;
	opacity: 0.5;	/*设置透明度*/
}
#front{
	background-color: green;
	transform: translateZ(8rem);
}
#later{
	background-color: red;
	transform: translateZ(-8rem);
}
#left{
	background-color: aqua;
	transform: rotateY(90deg);
	left: -8rem;
}
#right{
	background-color: lightyellow;
	transform: rotateY(90deg) ;
	right: -8rem;
}
#top{
	background-color: blue;
	transform: rotateX(90deg);
	top:-8rem;
}
#bottom{
	background-color: black;
	transform: rotateX(-90deg);
	bottom: -8rem;
}