用CSS样式 @keyframes、animation写一个旋转立体模型、动画模型，vue2

1. 需求：画一个正方体，让物体一直旋转
2. 环境：vue2、css
3. 效果：

1. 代码：

• 模型

<template>
<div>
    <!-- 旋转立体图 -->
    <div class="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
    </div>
</div>
</template>

• 样式

注意：@keyframes rotateBar中的旋转角度要开始和结束的度数刚好衔接上。

.cube {
  margin: 80px auto 0px;
  width: 200px;
  height: 200px;
  position: relative; 7   animation: rotateBar 10s ease-in-out infinite;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(135deg);
}
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-size: 100%;
}
.front {
  background:skyblue;
  transform: translateZ(100px);
}
.back {
    background:palevioletred;
  transform: rotateY(180deg) translateZ(100px);
}
.left {
  background:rgb(135, 142, 235);
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  background:rgb(243, 156, 129);
  object-fit: cover;
  transform: rotateY(90deg) translateZ(100px);
}
.top {
  background:gold;
  transform: rotateX(90deg) translateZ(100px);
  }
.bottom {
  background:aquamarine;
  transform: rotateX(-90deg) translateZ(100px);
  box-shadow: 0 0 0.6em hsla(0,0%,100%,.3), 0.6em -1em 3em hsla(0,0%,100%,.3), 1em 1em 10em hsla(0,0%,100%,.5);
}
@keyframes rotateBar {
  100% {
    transform: rotateX(-10deg) rotateY(765deg);
  }
  84% {
    transform: rotateX(-10deg) rotateY(675deg);
  }
  70% {
    transform: rotateX(-10deg) rotateY(585deg);
  }
  56% {
    transform: rotateX(-10deg) rotateY(495deg);
  }
  42% {
    transform: rotateX(-10deg) rotateY(405deg);
  }
  28% {
    transform: rotateX(-10deg) rotateY(315deg);
  }
  14% {
    transform: rotateX(-10deg) rotateY(225deg);
  }
  0% {
    transform: rotateX(-10deg) rotateY(135deg);
  }
}