2021-05-09

                                            小方块的旋转

1.首先给它来一个自定义的section，里面放六个div

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
	

2.给section添加一些样式     给div添加背景图片 

                section{
			width: 100px;
			height: 100px;
			margin: 150px auto;
			position: relative;
			transform-style: preserve-3d;
			animation: mom 3s linear infinite;
		      }
		section div{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url("思恩科技/images/14429937588106.jpg");
		      }

   3.给图片弄定位  加上动画效果

transform-style: preserve-3d;
animation: mom 3s linear infinite;

         @keyframes mom{
			0%{
				transform: rotateY(0deg) rotateX(0deg);left: 0px; top:0px;
			}
			100%{
				transform: rotateY(360deg) rotateX(360deg);left: 100px;            top:100px;
			}
		}

rotateY(0deg)    Y轴旋转      rotateX(0deg)  X轴旋转     left: 0px; top:0px;旋转的过程中移动

4.设置每个div图片的旋转位置

      section div:nth-child(1){
			transform: translateZ(50px);
		}
		section div:nth-child(2){
			transform: rotateX(90deg) translateZ(50px);
		}
		section div:nth-child(3){
			transform: rotateX(90deg) translateZ(-50px);
		}
		section div:nth-child(4){
			transform: rotateY(270deg) translateZ(-50px);
		}
		section div:nth-child(5){
			transform: rotateY(90deg) translateZ(-50px);
		}
		section div:nth-child(6){
			transform: rotateY(180deg) translateZ(50px);
		}

  此时小方块的效果就出来了

在浏览器上是边移动 边旋转的