立方体轮播图swiper实现

最新推荐文章于 2024-06-14 09:24:52 发布

咸鱼都能看懂的代码

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量214

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_43644046/article/details/138531869

版权

立方体四面实现旋转轮播图

需要的同学可以贴上图像，很炫酷，主要是swiper，当然使用effect也可以实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotating Cube with Swiper</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <style>
    /* 定义容器样式 */
    body, html {
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-container {
      width: 400px;
      height: 400px;
      perspective: 1000px;
    }

    /* Define styles for the cube */
    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      animation: rotate 10s infinite linear;
    }

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

    /*定义面的样式 */
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      backface-visibility: hidden;
    }

    /* 定义每一个面*/
    .face1 { background-color: red; transform: rotateY(0deg) translateZ(200px); }
    .face2 { background-color: green; transform: rotateY(90deg) translateZ(200px); }
    .face3 { background-color: blue; transform: rotateY(180deg) translateZ(200px); }
    .face4 { background-color: yellow; transform: rotateY(-90deg) translateZ(200px); }
  </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="cube">
          <div class="face face1">1</div>
          <div class="face face2">2</div>
          <div class="face face3">3</div>
          <div class="face face4">4</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      speed: 3000,
      autoplay: {
        delay: 0,
        disableOnInteraction: false,
      },
    });
  </script>
</body>
</html>