css3制作正方体

第一步
先设置六个一样大小的正方形并且设置绝对定位让着六个面叠放在同一位置并给box设置为3D属性
如图：
html代码

<ul class="box">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>

css代码

.box{
				width: 200px;
				height: 200px;
				position:absolute;
				transform-style: preserve-3d;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				}
	.box li{
	         width: 200px;
			height: 200px;
			position: absolute;
			left: 0;
			top:0;
			}

第二步

1. 用伪类选择符选中第一个面，让它沿Z轴走-200px，设置个背景色为红色；
2. 用伪类选择符选中第二个面，让它沿着X轴走200px，并沿着Y轴旋转90度，在改变选择点为左边中心，设置个背景色为黄色；
3. 用伪类选择符选中第三个面，让它沿着X轴走 -200px，并沿着Y轴旋转-90度，在改变选择点为右边中心，设置个背景色为灰色；
4. 用伪类选择符选中第四个面，让它沿着Y轴走 200px，并沿着X轴旋转-90度，在改变选择点为上边中心，设置个背景色为绿u色；
5. 用伪类选择符选中第五个面，让它沿着Y轴走 -200px，并沿着X轴旋转90度，在改变选择点为下边中心u，设置个背景色为蓝色；
6. 第六个面设置个背景色为粉红色；
   css代码为

.box li:nth-child(1){
				transform: translateZ(-200px);
			    background: red;
			}
			.box li:nth-child(2){
				transform: translateX(200px) rotateY(90deg);
				transform-origin: left center;
				background: yellow;
				}
			.box li:nth-child(3){
				transform: translateX(-200px) rotateY(-90deg);
				transform-origin: right center;
				background: #ccc;
				}
			.box li:nth-child(4){
				transform: translateY(200px) rotateX(-90deg);
			    transform-origin: top center;
			    background: green;
			}
			.box li:nth-child(5){
				transform: translateY(-200px) rotateX(90deg);
				transform-origin: bottom center;
				background: blue;
				}
			.box li:nth-child(6){background: pink;}

第三步
给正方体设置一个动画代码如下

@keyframes play{
					from{transform: rotateX(0) rotateY(0);}
					to{transform: rotateX(360deg) rotateY(360deg);}
				}

并给box加上代码
animation: play 5s linear infinite;

就可以实现正方体
如图：