Vue css 旋转木马

transform 属性应用

translate3d、rotate

@keyframes 线性动画

运行效果

css.png

代码

<template>
  <div class="about">
    <section>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img1.jpeg" alt="">
      </div>
      <div>
        <img src="../assets/img2.jpeg" alt="">
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name:'About',
  data() {
    return {

    }
  },
  methods: {

  },
}
</script>

<style>
  :root {
    --translate-Z:400px;
    --rotate-X:40deg;
    --rotate-X-:140deg;
    --translate-Y-:-350px;
    --translate-Y--:10px;
  }
  .about {
    perspective: 8000px;
  }
  section {
    position: relative;
    width: 200px;
    height: 342px;
    margin: 500px auto;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
  }
  /* section:hover {
    animation-play-state: paused;
  } */
  section div {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  section div img {
    width: 100%;
  }
  section div:nth-child(1) {
    transform: translateZ(var(--translate-Z));
  }
  section div:nth-child(2) {
    transform: rotateY(60deg) translateZ(var(--translate-Z));
  }
  section div:nth-child(3) {
    transform: rotateY(120deg) translateZ(var(--translate-Z));
  }
  section div:nth-child(4) {
    transform: rotateY(180deg) translateZ(var(--translate-Z));
  }
  section div:nth-child(5) {
    transform: rotateY(240deg) translateZ(var(--translate-Z));
  }
  section div:nth-child(6) {
    transform: rotateY(300deg) translateZ(var(--translate-Z));
  }
  section div:nth-child(7) {
    transform-origin: bottom;
    transform: translate3d(0,var(--translate-Y-),var(--translate-Z)) rotateX(var(--rotate-X));
  }
  section div:nth-child(8) {
    transform-origin: bottom;
    transform: rotateY(60deg) translate3d(0,var(--translate-Y-),var(--translate-Z)) rotateX(var(--rotate-X));
  }
  section div:nth-child(9) {
    transform-origin: bottom;
    transform: rotateY(120deg) translate3d(0,var(--translate-Y-),var(--translate-Z)) rotateX(var(--rotate-X));
  }
  section div:nth-child(10) {
    transform-origin: bottom;
    transform: rotateY(180deg) translate3d(0,var(--translate-Y-),var(--translate-Z)) rotateX(var(--rotate-X));
  }
  section div:nth-child(11) {
    transform-origin: bottom;
    transform: rotateY(240deg) translate3d(0,var(--translate-Y-),var(--translate-Z)) rotateX(var(--rotate-X));
  }
  section div:nth-child(12) {
    transform-origin: bottom;
    transform: rotateY(300deg) translate3d(0,var(--translate-Y-),var(--translate-Z)) rotateX(var(--rotate-X));
  }
  section div:nth-child(13) {
    transform-origin: bottom;
    transform: translate3d(0,var(--translate-Y--),var(--translate-Z)) rotateX(var(--rotate-X-));
  }
  section div:nth-child(14) {
    transform-origin: bottom;
    transform: rotateY(60deg) translate3d(0,var(--translate-Y--),var(--translate-Z)) rotateX(var(--rotate-X-));
  }
  section div:nth-child(15) {
    transform-origin: bottom;
    transform: rotateY(120deg) translate3d(0,var(--translate-Y--),var(--translate-Z)) rotateX(var(--rotate-X-));
  }
  section div:nth-child(16) {
    transform-origin: bottom;
    transform: rotateY(180deg) translate3d(0,var(--translate-Y--),var(--translate-Z)) rotateX(var(--rotate-X-));
  }
  section div:nth-child(17) {
    transform-origin: bottom;
    transform: rotateY(240deg) translate3d(0,var(--translate-Y--),var(--translate-Z)) rotateX(var(--rotate-X-));
  }
  section div:nth-child(18) {
    transform-origin: bottom;
    transform: rotateY(300deg) translate3d(0,var(--translate-Y--),var(--translate-Z)) rotateX(var(--rotate-X-));
  }
  section div:nth-child(19) {
    transform-origin: bottom;
    transform: rotateY(90deg);
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
</style>