css制作一个骰子

CSS代码：

*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 200px;
				height: 200px;
				position: relative;
				left: 200px;
				top: 200px;
				transition: 5s all;
				transform-origin: center;
				perspective: 1000;   /* 透视 眼睛距离屏幕的距离 */ 
				transform-style: preserve-3d; /* 创建一个3d 环境*/
			}
			#box:hover{
				transform: rotateY(360deg);
			}
			#box>div{
				width: 200px;
				height: 200px;
				position: absolute;
				text-align: center;
				line-height: 200px;
				color: white;
				font-size: 60px;
			}
			.one{
				background-color: black;
				
			}
			.two{
				background-color: orange;
				transform-origin: left;
				transform: rotateY(90deg);
			}
			.three{
				background-color: lightslategray;
				transform: translateZ(-200px);
			}
			.four{
				background-color: aquamarine;
				transform-origin: right;
				transform: rotateY(-90deg);
			}
			.five{
				transform-origin: top;
				background-color: blueviolet;
				transform: rotateX(-90deg);
			}
			.six{
				transform-origin: bottom;
				background-color: saddlebrown;
				transform: rotateX(90deg);
			}

JS代码：

<div id="box">
			<div class="one">
				1
			</div>
			<div class="two">
				2
			</div>
			<div class="three">
				3
			</div>
			<div class="four">
				4
			</div>
			<div class="five">
				5
			</div>
			<div class="six">
				6
			</div>
		</div>

效果如下：