Text3D.vue

<script setup lang="ts"></script>
<template>
  <div class="content fit center">
    <div class="container">
      <div class="text" style="--j: 0">
        <span style="--i: 0">2</span>
        <span style="--i: 1">你</span>
        <span style="--i: 2">4</span>
        <span style="--i: 3">5</span>
      </div>
      <div class="text" style="--j: 1">
        <span style="--i: 0">0</span>
        <span style="--i: 1">好</span>
        <span style="--i: 2">2</span>
        <span style="--i: 3">3</span>
      </div>
      <div class="text" style="--j: 2">
        <span style="--i: 0">2</span>
        <span style="--i: 1">明</span>
        <span style="--i: 2">4</span>
        <span style="--i: 3">5</span>
      </div>
      <div class="text" style="--j: 3">
        <span style="--i: 0">2</span>
        <span style="--i: 1">天</span>
        <span style="--i: 2">4</span>
        <span style="--i: 3">5</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.content {
  background: #3d3d3d;
  font-family: 'Impact', sans-serif;
}
.container {
  display: flex;
  transform-style: preserve-3d;
  gap: 10px;
  transform: rotateY(30deg) rotateX(10deg);
  .text {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: 2.5s ease-in-out;
    transition-delay: calc(0.25s * var(--j));
    span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(#434343, #535353);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 4em;
      color: #fff;
      transform-style: preserve-3d;
      transform: rotateX(calc(90deg * var(--i))) translateZ(50px);
    }
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #373737;
      transform-origin: left;
      transform: rotateY(90deg) translateX(-50px);
    }
    &:last-child {
      span {
        background: linear-gradient(#29c040, #32ed4e);
        color: #333;
      }
      &::before {
        background: #29ab3c;
      }
    }
  }
  &:hover {
    .text {
      transform: rotateX(-450deg);
      &:last-child {
        transform: rotateX(630deg);
      }
    }
  }
}
</style>