vue3实现立方体

CSS 的强大是你想象不到的，最近做一个 vue3 的项目，正好写个组件来温故一下。使用 CSS 实现一个正方体也使用一下 vue3 新增的 css 变量。

代码如下

<template>
  <ul :class="['cube', { 'turn-on': spread }, { rotate: rotate }]">
    <template
      v-for="i in [1, 2, 3, 4, 5, 6]"
      :key="i">
      <li class="surface">
        <slot :name="`surface${i}`">{{ i }}</slot>
      </li>
    </template>
    <li>
      <slot></slot>
    </li>
  </ul>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Cube',
    props: {
      // 棱长
      theLen: {
        type: String,
        default: '200px',
      },
      // 鼠标悬浮偏移距离
      offset: {
        type: String,
        default: '50px',
      },
      //鼠标悬浮是否可以打开
      spread: {
        type: Boolean,
        default: false,
      },
      // 旋转动画
      rotate: {
        type: Boolean,
        default: false,
      },
      // 角度
      angle: {
        type: String,
        default: '45deg',
      },
    },
  });
</script>
<style lang="scss" scoped>
  .cube {
    position: relative;
    list-style-type: none;
    width: v-bind(theLen);
    height: v-bind(theLen);
    transform: rotate3d(1, 1, 1, v-bind(angle));
    transform-style: preserve-3d;
    &.rotate {
      animation: rotate 10s infinite linear both;
    }
    & > li {
      position: absolute;
      top: 0;
      left: 0;
      width: v-bind(theLen);
      height: v-bind(theLen);
      &.surface {
        border: 1px solid #000;
      }
    }
    & > .surface:nth-of-type(1) {
      transform: translateZ(calc(v-bind(theLen) / 2));
    }
    & > .surface:nth-of-type(2) {
      transform: rotateY(90deg) translateZ(calc(v-bind(theLen) / 2));
    }
    & > .surface:nth-of-type(3) {
      transform: rotateY(360deg) translateZ(calc(-1 * v-bind(theLen) / 2));
    }
    & > .surface:nth-of-type(4) {
      transform: rotateY(90deg) translateZ(calc(-1 * v-bind(theLen) / 2));
    }
    & > .surface:nth-of-type(5) {
      height: v-bind(theLen);
      transform: rotateX(-90deg) translateZ(calc(-1 * v-bind(theLen) / 2));
    }
    & > .surface:nth-of-type(6) {
      height: v-bind(theLen);
      transform: rotateX(90deg) translateZ(calc(-1 * v-bind(theLen) / 2));
    }
    & > li:nth-of-type(7) {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid transparent;
    }
    &.turn-on:hover > .surface:nth-of-type(1) {
      transform: translateZ(calc(v-bind(offset) + v-bind(theLen) / 2));
    }
    &.turn-on:hover > .surface:nth-of-type(2) {
      transform: rotateY(90deg) translateZ(
          calc(v-bind(offset) + v-bind(theLen) / 2)
        );
    }
    &.turn-on:hover > .surface:nth-of-type(3) {
      transform: rotateY(360deg) translateZ(
          calc(-1 * v-bind(theLen) / 2 - v-bind(offset))
        );
    }
    &.turn-on:hover > .surface:nth-of-type(4) {
      transform: rotateY(90deg) translateZ(
          calc(-1 * v-bind(offset) - v-bind(theLen) / 2)
        );
    }
    &.turn-on:hover > .surface:nth-of-type(5) {
      height: v-bind(theLen);
      transform: rotateX(90deg) translateZ(
          calc(-1 * v-bind(offset) - v-bind(theLen) / 2)
        );
    }
    &.turn-on:hover > .surface:nth-of-type(6) {
      height: v-bind(theLen);
      transform: rotateX(-90deg) translateZ(
          calc(-1 * v-bind(offset) - v-bind(theLen) / 2)
        );
    }
  }

  @keyframes rotate {
    from {
      transform: rotate3d(1, 1, 1, 0deg);
    }
    to {
      transform: rotate3d(1, 1, 1, 360deg);
    }
  }
</style>