Rotate3D.vue

<script setup lang="ts"></script>
<template>
  <div class="content fit center">
    <section>
      <div><img src="../imgs/1.png" alt="" /></div>
      <div><img src="../imgs/2.jpg" alt="" /></div>
      <div><img src="../imgs/3.jpg" alt="" /></div>
      <div><img src="../imgs/4.jpg" alt="" /></div>
      <div><img src="../imgs/5.jpg" alt="" /></div>
      <div><img src="../imgs/6.jpg" alt="" /></div>
    </section>
  </div>
</template>
<style lang="scss" scoped>
@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.content {
  background: #000;
  // 视距
  perspective: 900px;
}
section {
  position: relative;
  width: 200px;
  height: 140px;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: rotate 20s linear infinite;

  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    // 设置元素倒影效果 below 是倒影效果在元素下方
    // 15px是元素和倒影的距离
    // 后面的属性设置的倒影背景渐变
    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3));
    img {
      width: 100%;
      height: 100%;
    }

    &:nth-child(1) {
      transform: translateZ(200px);
    }
    &:nth-child(2) {
      transform: rotateY(60deg) translateZ(200px);
    }
    &:nth-child(3) {
      transform: rotateY(120deg) translateZ(200px);
    }
    &:nth-child(4) {
      transform: rotateY(180deg) translateZ(200px);
    }
    &:nth-child(5) {
      transform: rotateY(240deg) translateZ(200px);
    }
    &:nth-child(6) {
      transform: rotateY(300deg) translateZ(200px);
    }
  }
  &:hover {
    // 停止动画
    animation-play-state: paused;
  }
}
</style>