通过3D,及动画，写一个魔方，通过旋转，偏移使得ul变成一个正方体的魔方通过3D,及动画，写一个魔方，通过旋转，偏移使得

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>
</ul>

     body{
 		-webkit-perspective: 1000px;
 		-webkit-perspective-origin: center center;
 		position: relative;
 		height: 100vh;
 	}

  	ul{
  		-webkit-transform-style: preserve-3d;
  		width: 300px;
  		height: 300px;
  		transform: rotateX(60deg);
  		position: absolute;
  		left: 50%;
  		top: 50%;
  		margin-left: -150px;
  		margin-top: -150px;
  		animation: state 5s linear infinite;
  	}

  	li{
  		width: 100%;
  		height: 100%;
  		position: absolute;
  		left: 0;
  		top: 0;
  		text-align: center;
  		line-height: 300px;
  	}
  	li:nth-child(1){
  		background-color: rgba(0, 255, 0, 1);
  		transform: translateZ(150px);
  	}
  	li:nth-child(2){
  		background-color: rgba(0, 0, 255, 1);
  		transform: rotateY(90deg) translateZ(150px);
  	}
  	li:nth-child(3){
  		background-color: rgba(255, 0, 255, 1);
  		transform: rotateY(180deg) translateZ(150px);
  	}
  	li:nth-child(4){
  		background-color: rgba( 0, 255, 255, 1);
  		transform: rotateY(270deg) translateZ(150px);
  	}
  	li:nth-child(5){
  		background-color: rgba( 110, 0, 215, 1);
  		transform: rotateX(90deg) translateZ(150px);
  	}
  	li:nth-child(6){
  		background-color: rgba( 110, 0, 0, 1);
  		transform: rotateX(270deg) translateZ(150px);
  	}

  	@-webkit-keyframes state{
  		0%{
  			transform: rotateX(0deg) rotateY(0deg);
  		}
  		50%{
  			transform: rotateX(180deg) rotateY(180deg);
  		}
  		100%{
  			transform: rotateX(360deg) rotateY(360deg);
  		}
  	}