(自动)旋转木马-详细教程

刚子最爱编程

已于 2022-10-23 23:57:20 修改

阅读量842

点赞数 6

文章标签： css3 html5 前端

于 2022-10-23 22:51:58 首次发布

本文链接：https://blog.csdn.net/qq_64703421/article/details/127482818

版权

希望能帮到大家

一、页面展示

二、详细教程--拆分

三、全部代码

一、页面展示

二、详细教程--拆分

1. body部分--最简单之一

先放入9张图片，我用的是无序列表ul li 来搭建，当然你也可以用div 都不影响的。

<body>
  <div class="box">
      <h2 style="text-align:center;">旋转木马</h2>
    <ul>
      <li><img src="./images/1.webp" alt=""></li>
      <li><img src="./images/2.webp" alt=""></li>
      <li><img src="./images/3.webp" alt=""></li>
      <li><img src="./images/4.webp" alt=""></li>
      <li><img src="./images/5.webp" alt=""></li>
      <li><img src="./images/6.webp" alt=""></li>
      <li><img src="./images/7.webp" alt=""></li>
      <li><img src="./images/8.webp" alt=""></li>
      <li><img src="./images/9.webp" alt=""></li>
    </ul>
  </div>
</body>

2.css部分拆解

因为我用的是无需列表所以会有小圆点，我要去除它，还有我把图片的宽高限定死了。

    * {
      margin: 0;
      padding: 0;
    }
    img {
      border: 0;
      width: 150px;
      height: 200px;
    }
    ul,
    ol,
    li {
      list-style: none;
    /* 去掉小圆点 */
    }

3.正文部分

理解

说说我对这个旋转木马的理解吧，首先我们有几张图片，这里我用了9张图，360一圈除9就是40度一个图。首先我们要将这些图全部叠在一起，就想象一下扑克牌，整整齐齐的叠一起，然后我们要将每一张图片旋转位移达到我们最终的目的，最后将静态的旋转木马加上css3的动画效果让他旋转，前提：如果你想分析透彻你必须要会2d，3d转换，和动画。如果是想用也有全部代码。

代码分析

透视(prespective)

用到 3d转换必然离不开透视(prespective)，这个属性我们一般加到父盒子上面，这里我虽然加到了div.box盒子上是因为我给div盒子设置了总的宽度，一般和 translateZ() 搭配使用。

定位

说到旋转木马，离不开定位，定位常用的是子使用绝对定位，父亲使用相对定位（子绝父相），一旦这样，你会发现只能看到一张图片了，因为他们都叠在一起了（类似扑克牌）。

3d效果

因为我们要看到3d立体的效果，则必须要开启3d效果！

    .box {
      margin: 50px auto;
      width: 900px;
      height: 900px;
      perspective: 800px;
      perspective-origin: top;/*透视原点，top 为我想要在上面看旋转木马，俯视*/

    }
    .box ul {
      margin: 150px auto;
      width: 150px;
      height: 200px;
      position: relative;
      transform-style: preserve-3d;/*这是开启3d效果*/
      animation: move 8s linear infinite; /*这是动画调用*/
    }
    .box ul li {
      position: absolute;
      top: 0;
      left: 0;
    }

动画

讲到动画首先是先定义动画然后再使用动画

这里是开始是不旋转任何度数，结束是旋转360度，

解释下面这个代码就是使用动画，里面参数有很多，这里的意思是我要使用定义好的move动画名称然后持续时间8s，匀速，无限循环

    @keyframes move {
      from {
        transform: rotateY(0deg);
      }
      to{
        transform: rotateY(360deg);
      }


/*解释*/
 animation: move 8s linear infinite; /*这是动画调用*/

4. 因为图片是一张张叠起来的。

如果你学过3d旋转就不难理解，这里我把每一个li选出来是因为li的宽高和img是一样的，选出来后，我需要将每一个图片旋转40度，但第一张图片不旋转，屏幕是面对者我们，第一张也是一个角度。

translateZ(210px);

这个属性的px值越大，看到的物体越大，前提是你的透视不变下，属性里面的 px值也是有讲究的，用到了勾股定理根据计算205px 是刚好是一个圆的大小，我这里把值设大了点，算出的这个r就是我们要的 px值，角度知道，高度知道，不难算出是205px

难点理解

说一下为什么这里的 z轴都是一样的，因为我们旋转的角度不一样，我们是先旋转然后在在用z轴进行位移，如果你默认不旋转，然后设置z轴为300，则你会看到这个物体像是往你眼前走进，

如果你旋转了180度之后然后设置z轴为300，你就会发现这个物体好像远离了你似的，所以，角度不同你看到的效果是不一样的，但是你的z轴确实一样，

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

三、全部代码

有不懂的问题可以评论区留言，我会及时回复

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转木马</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    img {
      border: 0;
      width: 150px;
      height: 200px;
    }
    ul,
    ol,
    li {
      list-style: none;
    }
    .box {
      margin: 50px auto;
      width: 900px;
      height: 900px;
      perspective: 800px;
      perspective-origin: top;
      overflow: hidden;
    }
    .box ul {
      margin: 150px auto;
      width: 150px;
      height: 200px;
      position: relative;
      transform-style: preserve-3d;
      animation: move 8s linear infinite; 
    }
    .box ul li {
      position: absolute;
      top: 0;
      left: 0;
    }
    @keyframes move {
      from {
        transform: rotateY(0deg);
      }
      to{
        transform: rotateY(360deg);
      }
    }
    li:nth-child(1) {transform: rotateY(0deg) translateZ(210px);}
    li:nth-child(2) {transform: rotateY(40deg) translateZ(210px);}
    li:nth-child(3) {transform: rotateY(80deg) translateZ(210px);}
    li:nth-child(4) {transform: rotateY(120deg) translateZ(210px);}
    li:nth-child(5) {transform: rotateY(160deg) translateZ(210px);}
    li:nth-child(6) {transform: rotateY(200deg) translateZ(210px);}
    li:nth-child(7) {transform: rotateY(240deg) translateZ(210px);}
    li:nth-child(8) {transform: rotateY(280deg) translateZ(210px);}
    li:nth-child(9) {transform: rotateY(320deg) translateZ(210px);}
  </style>
</head>

<body>
  <div class="box">
      <h2 style="text-align:center;">旋转木马</h2>
    <ul>
      <li><img src="./images/1.webp" alt=""></li>
      <li><img src="./images/2.webp" alt=""></li>
      <li><img src="./images/3.webp" alt=""></li>
      <li><img src="./images/4.webp" alt=""></li>
      <li><img src="./images/5.webp" alt=""></li>
      <li><img src="./images/6.webp" alt=""></li>
      <li><img src="./images/7.webp" alt=""></li>
      <li><img src="./images/8.webp" alt=""></li>
      <li><img src="./images/9.webp" alt=""></li>

    </ul>
  </div>
</body>

</html>

关注我

持续更新！！！