vue3动画效果，立体图形动画

代码如下：

<template>
  <div class="box-container">
    <div class="box">
      <div class="face1"></div>
      <div class="face2"></div>
      <div class="face3"></div>
      <div class="face4"></div>
      <div class="face5"></div>
      <div class="face6"></div>
      <div class="face7"></div>
      <div class="face8"></div>
    </div>
  </div>
</template>

<style>
.box-container {
  perspective: 800px;
}

.box {
  position: relative;
  margin: 0 auto;
  margin-top:80px;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: rotate-box 3s linear infinite;
}

.face1,
.face2,
.face3,
.face4,
.face5,
.face6,
.face7,
.face8 {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #ff9933;
  border: 2px solid #fff;
  animation: color-change 5s ease-in-out infinite alternate;
}

.face1 {
  transform: rotate3d(1, 0, 0, 0deg) translateZ(75px);
}

.face2 {
  transform: rotate3d(0, 1, 0, 45deg) translateZ(75px);
}

.face3 {
  transform: rotate3d(0, 1, 0, 135deg) translateZ(75px);
}

.face4 {
  transform: rotate3d(1, 0, 0, 180deg) translateZ(75px);
}

.face5 {
  transform: rotate3d(1, 0, 0, -90deg) translateZ(75px);
}

.face6 {
  transform: rotate3d(0, 1, 0, -135deg) translateZ(75px);
}

.face7 {
  transform: rotate3d(0, 1, 0, -45deg) translateZ(75px);
}

.face8 {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(75px);
}

@keyframes rotate-box {
  from {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

@keyframes color-change {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

效果如图：