前端构造立方体

效果图：

 代码：

<template>
  <div>
    <div class="bruce flex-ct-x">
      <div class="td-cube">
        <ul>
          <li class="front">1</li>
          <li class="back">2</li>
          <li class="top">3</li>
          <li class="bottom">4</li>
          <li class="left">5</li>
          <li class="right">6</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style lang="scss" scoped>
$width: 360px;
$height: 360px;
$length: 360px;
$red: red;
$orange: orange;
$purple: purple;
$blue: blue;
$cyan: cyan;
$green: green;
.td-cube {
  width: $width;
  height: $height;
  perspective: 1000px;
  margin: 0 auto;
  ul {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateX(-15deg) rotateY(15deg);
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  li {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: $width;
    height: $height;
    opacity: 0.8;
    font-size: 50px;
    color: #fff;
  }
}
.front {
  background-color: $red;
  transform: translateZ($length / 2);
}
.back {
  background-color: $purple;
  transform: rotateY(180deg) translateZ($length / 2);
}
.top {
  background-color: $orange;
  transform: rotateX(90deg) translateZ($height / 2);
}
.bottom {
  background-color: $blue;
  transform: rotateX(-90deg) translateZ($height / 2);
}
.left {
  background-color: $cyan;
  transform: rotateY(-90deg) translateZ($width / 2);
}
.right {
  background-color: $green;
  transform: rotateY(90deg) translateZ($width / 2);
}
@keyframes rotate {
  from {
    transform: rotateY(0) rotateX(0);
  }
  to {
    transform: rotateY(-1turn) rotateX(-1turn);
  }
}
</style>