使用transfrom来制作旋转木马

最新推荐文章于 2024-11-11 19:29:13 发布

lyj一叶知秋

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量500

点赞数

文章标签： javascript css3 动画

本文链接：https://blog.csdn.net/lyj15390447067/article/details/122687735

版权

使用transfrom来制作旋转木马

使用的技术

绝对定位 position:relative;
相对定位 position：absolute；
3D转换 transfrom-style：perserve-3d；
基角(观察者角度) transfrom-origin：方向；
perspective: n; 空间距离(转为3d) 有兼容性
-webkit-perspective: n;
动画 @keyframes 名称{
from{
}
to{
}
}
平移，转换 translateZ(npx) rotate(ndeg)

整体思路

html 使用一个大的div包裹一个ul然后包裹li在包裹img

<div class="box">
            <ul class="content">
                  <li><img src="./mouse_cat_one.gif" alt=""></li>
                  <li><img src="./mouse_cat_two.gif" alt=""></li>
                  <li><img src="./mouse_cat_three.gif" alt=""></li>
                  <li><img src="./mouse.jpg" alt=""></li>
                  <li><img src="./cat.jpg" alt=""></li>
                  <li><img src="./page.jpg" alt=""></li>
                  <li><img src="./mouse_cat_four.gif" alt=""></li>
                  <li><img src="./mouse_cat_five.gif" alt=""></li>
                  <li><img src="./mouse_cat_sex.gif" alt=""></li>
                  <li><img src="./mouse_cat_seven.jpg" alt=""></li>
            </ul>
            
      </div>

css 大的box设置perspective：3700；。里面的content设置相对定位，并转化为3D模式，设置动画效果

*{
                  padding: 0px;
                  margin: 0px;
                  list-style: none;
            }
             .box{
                  width:300px ;
                  height:300px ;
                  margin:180px auto;
                  perspective: 3700;
                  -webkit-perspective: 3700;
                  perspective-origin: bottom;
            }
            .box .content{
                  width: 100%;
                  height:300px ;
                  margin:10px auto;
                  position: relative;
                  transform-style: preserve-3d;
                  background: url('./mouse_cat_bg.jpg') no-repeat ;
                  background-size: 100% 100%;
                  animation: abs 15s infinite linear;
                  

            }

.box .content li 设置绝对定位使其脱离文档流

.box .content li{
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 100%;
                  height: 100%;
            }
            .box .content li img{
                 width: 100%;
                 height: 100%;
            }

最关键的一步给li设置效果 rotateY：ndeg；旋转 translate：npx；Z轴平移

.box .content:hover li:nth-child(1){
                  transform:rotateY(0deg) translateZ(500px);
                  
            }
            .box .content:hover li:nth-child(2){
                  transform:rotateY(40deg) translateZ(500px);
            }
            .box .content:hover li:nth-child(3){
                  transform:rotateY(80deg) translateZ(500px);
            }
            .box .content:hover li:nth-child(4){
                  transform:rotateY(120deg) translateZ(500px);
            }
            .box .content:hover li:nth-child(5){
                  transform:rotateY(160deg) translateZ(500px);
            }
            .box .content:hover li:nth-child(6){
                  transform:rotateY(200deg) translateZ(500px);
            }
            .box .content:hover li:nth-child(7){
                  transform:rotateY(240deg) translateZ(500px);
            }
            .box .content:hover li:nth-child(8){
                  transform:rotateY(280deg) translateZ(500px);
            }
            .box .content:hover li:nth-child(9){
                  transform:rotateY(320deg) translateZ(500px);
            }

最后设置动画效果

@keyframes abs{
                  form{

                  }
                  to{
                        transform:rotateY(360deg) ;
                  }
            }```

![最后一个3D旋转木马出来了](https://img-blog.csdnimg.cn/1ce64ae631cd41018d0b1111205ec67d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHlq5LiA5Y-255-l56eL,size_20,color_FFFFFF,t_70,g_se,x_16)