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

原创

已于 2022-10-23 23:57:20 修改 · 1.4k 阅读

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

本文详细介绍了如何使用HTML和CSS创建3D旋转木马效果，包括页面布局、样式设置、3D转换及动画原理，通过9张图片的排列和旋转，呈现出动态的视觉体验。关键点在于利用perspective、transform-style、rotateY和translateZ属性，以及通过@keyframes定义动画。代码中还包含了完整示例，帮助读者理解和实现。

希望能帮到大家

一、页面展示

二、详细教程--拆分

三、全部代码

一、页面展示

二、详细教程--拆分

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

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

<body>
  <div class="box">
      <h2 style="text-align:center;">旋转木马</h2>
    <ul>
      <li><img src="https://blog.csdn.net/images/1.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/images/2.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/images/3.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/images/4.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/images/5.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/images/6.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/images/7.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/images/8.webp" alt=""></li>
      <li><img src="https://blog.csdn.net/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.正文部分

标签