css3制作立方体

1.效果展示；

2.html代码模块

		<div class="box">
			<div class="front">前面</div>
			<div class="back">后面</div>
			<div class="top">顶面</div>
			<div class="bottom">底面</div>
			<div class="left">左面</div>
			<div class="right">右面</div>
		</div>

3.样式模块

			*{
				margin: 0;
				padding: 0;
			}
			div {
				height: 100px;
				width: 100px;
			}
			.box {
				position: relative;
				margin: 100px auto;
				width: 300px;
				transform-style: preserve-3d;
				animation:rotate 15s infinite;/*animation：动画名字 时长 无限循环 线性速度（匀速）*/
			}
			@keyframes rotate{
				from{
					transform:rotateY(0deg) rotateX(0deg);
				}
				to{
					transform: rotateY(360deg) rotateX(360deg);
				}
			}
			.box>div {
				position: absolute;
				opacity: 0.8;
			}
			.front {
				background: #FF3399;
				transform: translateZ(50px);
			}
			.back {
				background: #3366FF;
				transform: translateZ(-50px);
			}
			.top {
				background: #FF6600;
				transform: translateY(-50px) rotateX(90deg);
			}
			.bottom {
				background: #00CC00;
				transform: translateY(50px) rotateX(-90deg);
			}
			.left {
				background: #FF3333;
				transform: translateX(50px) rotateY(-90deg);
			}
			.right {
				background: blue;
				transform: translateX(-50px) rotateY(90deg);
			}