CSS---3D环绕旋转动画

CSS—3D环绕旋转动画

1、HTML相关代码

<div class="rotate">
    <div class="rotate-page-content">
      <div class="rotate-page-content-box">
        <div class="rotate-page-content-box-container">
          <div
            :class="['rotate-item', 'item' + item.id]"
            v-for="item in rotateList"
            :key="item.id"
              
            :style="`--item:${item.id - 1}`"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>

:style="–item:值"为CSS自定义属性，自定义属性它包含的值可以使用var()函数来获取

2、列表数据

<script lang="ts" setup>
const rotateList = reactive([
  { id: 1, title: "一" },
  { id: 2, title: "二" },
  { id: 3, title: "三" },
  { id: 4, title: "四" },
  { id: 5, title: "五" },
  { id: 6, title: "六" },
  { id: 7, title: "七" },
  { id: 8, title: "八" },
]);
</script>

3、CSS相关代码

rotate-item

• 使用了 position: absolute;

• 使用 transform: rotateY(calc(var(–item) * 45deg)) translateZ(20vw);

  初始化各盒子位置 角度为 360°/item的数量，现在是8个item，所以360°/8 为45°

<style lang="scss" scoped>
.rotate {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.rotate-page-content {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
.rotate-page-content-box {
  width: 100%;
  box-sizing: border-box;
  margin: auto;
  display: flex;
  flex-direction: column;

  &-container {
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateMove 20s linear infinite;
    .rotate-item {
      width: 10vw;
      height: 15vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      color: #091d3f;
      font-size: 1vw;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      cursor: pointer;
      /* 初始化各盒子位置 角度为360°/item的数量*/
      transform: rotateY(calc(var(--item) * 45deg)) translateZ(20vw);
      background-color: rgba($color: #effcff, $alpha: 0.6);
    }

    //鼠标移入效果，盒子以及盒子内容按比例放大
    .rotate-item:hover {
      width: 12vw;
      height: 18vh;
      font-size: 1.2vw;
    }
  }
  //鼠标移入，暂停动画
  &-container:hover {
    animation-play-state: paused;
  }
}

@keyframes rotateMove {
  from {
    transform: rotateX(-6deg) rotateY(0deg);
  }

  to {
    transform: rotateX(-6deg) rotateY(360deg);
  }
}
</style>

4、效果图