3D 旋转立方体效果（摇塞子）

效果图

.vue

<template>
  <view class="container flex-center">
    <view class="cube">
      <view v-for="(item,index) in 6" :key="index"
            class="cube-item flex-center">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script setup lang='ts'>

</script>

<style lang='scss' scoped>
.container{
  padding-top: 20vh;
}

@keyframes rotate-cube {
  0%{
    // 1
    transform: rotateX(0deg) rotateY(0deg);
  }

  16.65%{
    // 3
    transform: rotateX(0deg) rotateY(90deg);
  }

  33.3%{
    // 5
    transform: rotateX(90deg) rotateY(0deg);
  }

  49.95%{
    // 6
    transform: rotateX(180deg) rotateY(0deg);
  }

  66.6%{
    // 2
    transform: rotateX(0deg) rotateY(-90deg);
  }

  83.25%{
    // 4
    transform:rotateX(-90deg) rotateY(0deg);
  }

  100%{
    // 1
    transform: rotateX(0deg) rotateY(0deg);
  }
}

.cube{
  --area:400rpx;
  --half:calc(var(--area) / 2);

  width: var(--area);
  height: var(--area);
  font-size: 60rpx;
  transform-origin: var(--half) var(--half) 0;
  transform-style: preserve-3d;
  animation: rotate-cube 7s ease-in-out infinite;
  will-change: transform;

  &-item{
    position: absolute;
    width: var(--area);
    height: var(--area);
    opacity: .8;

    &:nth-child(1){
      background: red;
      transform: rotateY(0deg) translateZ(var(--half));
    }

    &:nth-child(2){
      background: orange;
      transform: rotateY(90deg) translateZ(var(--half));
    }

    &:nth-child(3){
      background: yellow;
      transform: rotateY(-90deg) translateZ(var(--half));
    }

    &:nth-child(4){
      background: green;
      transform: rotateX(90deg) translateZ(var(--half));
    }

    &:nth-child(5){
      background: cyan;
      transform: rotateX(-90deg) translateZ(var(--half));
    }

    &:nth-child(6){
      background: blue;
      transform: rotateY(180deg) translateZ(var(--half)) rotate(180deg);
    }
  }
}
</style>

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。