526互联

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

发布时间 2023-07-26 18:16:52作者: 芹菜是一根葱
  1. 需求：画一个正方体，让物体一直旋转
  2. 环境：vue2、css
  3. 效果：

  1. 代码：
  • 模型
 1 <template>
 2 <div>
 3     <!-- 旋转立体图 -->
 4     <div class="cube">
 5         <div class="face front"></div>
 6         <div class="face back"></div>
 7         <div class="face left"></div>
 8         <div class="face right"></div>
 9         <div class="face top"></div>
10         <div class="face bottom"></div>
11     </div>
12 </div>
13 </template>
  • 样式

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

 1 .cube {
 2   margin: 80px auto 0px;
 3   width: 200px;
 4   height: 200px;
 5   position: relative; 7   animation: rotateBar 10s ease-in-out infinite;
 8   transition: transform 2s linear;
 9   transform-style: preserve-3d;
10   transform: rotateX(-10deg) rotateY(135deg);
11 }
12 .face {
13   position: absolute;
14   width: 200px;
15   height: 200px;
16   background-size: 100%;
17 }
18 .front {
19   background:skyblue;
20   transform: translateZ(100px);
21 }
22 .back {
23     background:palevioletred;
24   transform: rotateY(180deg) translateZ(100px);
25 }
26 .left {
27   background:rgb(135, 142, 235);
28   transform: rotateY(-90deg) translateZ(100px);
29 }
30 .right {
31   background:rgb(243, 156, 129);
32   object-fit: cover;
33   transform: rotateY(90deg) translateZ(100px);
34 }
35 .top {
36   background:gold;
37   transform: rotateX(90deg) translateZ(100px);
38   }
39 .bottom {
40   background:aquamarine;
41   transform: rotateX(-90deg) translateZ(100px);
42   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);
43 }
44 @keyframes rotateBar {
45   100% {
46     transform: rotateX(-10deg) rotateY(765deg);
47   }
48   84% {
49     transform: rotateX(-10deg) rotateY(675deg);
50   }
51   70% {
52     transform: rotateX(-10deg) rotateY(585deg);
53   }
54   56% {
55     transform: rotateX(-10deg) rotateY(495deg);
56   }
57   42% {
58     transform: rotateX(-10deg) rotateY(405deg);
59   }
60   28% {
61     transform: rotateX(-10deg) rotateY(315deg);
62   }
63   14% {
64     transform: rotateX(-10deg) rotateY(225deg);
65   }
66   0% {
67     transform: rotateX(-10deg) rotateY(135deg);
68   }
69 }