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

49 阅读1分钟
  • <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);
      		}
      	}