手敲女神动态图，前端练手小项目

1.效果展示

2.源码

2.1html部分

<body>
		<div class="cube">
			<div class="box1"><img src="./img/imgs/1.jpg"></div>
			<div class="box2"><img src="./img/imgs/2.jpg"></div>
			<div class="box3"><img src="./img/imgs/3.jpg"></div>
			<div class="box4"><img src="./img/imgs/4.jpg"></div>
			<div class="box5"><img src="./img/imgs/5.jpg"></div>
			<div class="box6"><img src="./img/imgs/6.jpg"></div>
			<div class="box7"><img src="./img/imgs/1.jpg"></div>
			<div class="box8"><img src="./img/imgs/2.jpg"></div>
			<div class="box9"><img src="./img/imgs/3.jpg"></div>
			<div class="box10"><img src="./img/imgs/4.jpg"></div>
			<div class="box11"><img src="./img/imgs/5.jpg"></div>
			<div class="box12"><img src="./img/imgs/6.jpg"></div>
		</div>
	</body>

2.2 部分

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
*{
    
    
    padding:0;
    margin:0;
   }
 .cube{
    
    
    width:200px;
    height:200px;
    position:relative;
    margin:300px 0 0 750px;
    transform: rotateY(360deg) ;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
   }
@keyframes rotate{
    
    
    0%{
    
    
     transform:rotateX(0deg) translateZ(0) ;
      }
   100%{
    
    
    transform:rotateX(1turn) translateZ(1turn);
       }
   }
html{
    
    
   perspective: 10000px;
    }
.cube>div{
    
    
   position:absolute;
         }
img{
    
    
     width:200px;
     height:200px;
    }
.cube .box1{
    
    
     transform: rotateY(0) translateZ(400px);
   }
.cube .box2{
    
    
     transform: rotateY(30deg) translateZ(400px);
   }
.cube .box3{
    
    
     transform: rotateY(60deg) translateZ(400px);
     }
.cube .box4{
    
    
      transform: rotateY(90deg) translateZ(400px);
     }
.cube .box5{
    
    
       transform: rotateY(120deg) translateZ(400px);
     }
.cube .box6{
    
    
    transform: rotateY(150deg) translateZ(400px);
    }
.cube .box7{
    
    
    transform: rotateY(180deg) translateZ(400px);
   }
.cube .box8{
    
    
     transform: rotateY(210deg) translateZ(400px);
    }
.cube .box9{
    
    
     transform: rotateY(240deg) translateZ(400px);
    }
.cube .box10{
    
    
     transform: rotateY(270deg) translateZ(400px);
   } 
.cube .box11{
    
    
    transform: rotateY(300deg) translateZ(400px);
     }
.cube .box12{
    
    
     transform: rotateY(330deg) translateZ(400px);
    }
.cube:hover .box1{
    
    
      transform: rotateY(0) translateZ(600px);
     }
.cube:hover .box2{
    
    
      transform: rotateY(30deg) translateZ(600px);
    }
.cube:hover .box3{
    
    
      transform: rotateY(60deg) translateZ(600px);
    }
.cube:hover .box4{
    
    
       transform: rotateY(90deg) translateZ(600px);
     }
.cube:hover:hover .box5{
    
    
     transform: rotateY(120deg) translateZ(600px);
     }
.cube:hover .box6{
    
    
      transform: rotateY(150deg) translateZ(600px);
     }
.cube:hover .box7{
    
    
      transform: rotateY(180deg) translateZ(600px);
    }
.cube:hover .box8{
    
    
      transform: rotateY(210deg) translateZ(600px);
     }
.cube:hover .box9{
    
    
     transform: rotateY(240deg) translateZ(600px);
    }
.cube:hover .box10{
    
    
     transform: rotateY(270deg) translateZ(600px);
     }
.cube:hover .box11{
    
    
       transform: rotateY(300deg) tanslateZ(600px);
    }
  .cube:hover .box12{
    
    
   transform: rotateY(330deg) translateZ(600px);
    }

3.源码解析

3.1关键帧

 @keyframes rotate{
    
      
0%{
    
    
     transform:rotateX(0deg) translateZ(0) ;
      }
   100%{
    
    
    transform:rotateX(1turn) translateZ(1turn);
       }
   }

用于设置间隔段动态效果

3.2 rotateY()和translateZ()

首先我们要了解一个图

请添加图片描述

3.2.1rotateY()

rotateY（）就是元素围绕y轴旋转

3.2.2translateZ()

translateZ()和旋转结合在一起，而且translateZ()取值为正，那么这个元素就会朝着自己面向的方向前进

3.2.3transform-style: preserve-3d

使图形具有3D效果

4.思路解析

将包裹十二张图片的容器设置为absolute

十二张图片设置为relative

在Y轴方向上第一张图片不旋转，之后的每张图片Y轴的旋转都增加360/12（deg）

在Z轴上朝着自己面向的方向前进一定的数值px形成3D效果

为每张图片添加:hover事件。translateZ()的数值增大。

如果你们觉得还不错的话，

帮博主点个赞吧

如果能点个关注就更好了