html实现动态魔方效果(rotate、translate)

//样式如下

	<style type="text/css">
    *{
       /*  清除默认样式 */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    ul{
    	width: 200px;
    	height: 200px;
    	margin: 100px auto;

        /*开启定位，这样子元素使用%作为宽高单位是，将参考它*/
    	position: relative;
    }
    li{
    	font-family: "黑体",sans-serif;
    	font-size: 80px;
    	font-weight: bold;
    	color: #fff;
    	width: 100%;
    	height: 100%;

        /* 开启flex布局 */
    	display: flex;
    	justify-content:center;

        /*开启绝对定位使其折叠*/
    	position: absolute;
    }

    /* 开始设置正方体的每一个面 */
    /* 上面 */
    li:nth-child(1){
    	background-color: rgba(255,0,0,0.5);
    	transform:rotateX(90deg) translateZ(100px);
    }
    /*下面*/
    li:nth-child(2){
    	background-color: rgba(0,255,0,0.5);
    	transform:rotateX(270deg) translateZ(100px);
    }
    /*左面*/
    li:nth-child(3){
    	background-color: rgba(0,0,255,0.5);
    	transform:rotateY(270deg) translateZ(100px);
    }
    /*右面*/
    li:nth-child(4){
    	background-color: rgba(255,255,0,0.5);
    	transform:rotateY(90deg) translateZ(100px);
    }
    /*前面*/
    li:nth-child(5){
    	background-color: rgba(255,0,255,0.5);
    	transform:translateZ(100px);
    }
    /*后面*/
    li:nth-child(6){
    	background-color: rgba(0,255,255,0.5);
    	transform:translateZ(-100px);
    }
   .cube{
        /* perspective:800px;  */
        /*开启三维渲染的上下文，使其所有子元素共享同一三维空间*/
        transform-style:preserve-3d;
       /* 对ul元素添加动画效果，设置持续10s、匀速且无限播放*/
        animation:run 10s linear infinite;
   }
   @-webkit-keyframes run{
       
   	   from{transform:rotateX(0deg) rotateY(0deg) }
   	   to{transform:rotateX(360deg) rotateY(360deg) }
   }
   @keyframes run{
       /*动画初始状态时元素旋转角度*/
   	   from{transform:rotateX(0deg) rotateY(0deg) }
       /*动画结束状态时元素旋转角度*/
   	   to{transform:rotateX(360deg) rotateY(360deg) }
   }

	</style>

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