动效优化

components/layout/AiDvDisplay/AiDvDisplay.vue

@@ -5,11 +5,11 @@
       <h2>{{ title }}</h2>
       <img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
     </div>
-    <component class="background" :is="type"/>
-    <div class="displayPanel">
-      <div class="animation">
+    <div class="displayPanel fill">
+      <div class="animation abs-center">
         <component class="item" v-for="(op,i) in list" :key="i" :is="item" v-bind="op" :style="{transform:getPos(i)}"/>
       </div>
+      <component class="content-background abs-center" :is="type"/>
     </div>
   </section>
 </template>
@@ -29,10 +29,6 @@ export default {
     },
     list: {default: () => []},
   },
-  data () {
-    return {
-    }
-  },
   methods: {
     getPos(i) {
       let unit = this.list.length > 0 ? 2 * Math.PI / this.list.length : 0,
@@ -48,6 +44,15 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .abs-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
   .display-top {
     position: relative;
@@ -96,17 +101,15 @@ export default {
   }
 
   .displayPanel {
-    position: absolute;
-    width: 160px;
-    height: 160px;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    z-index: 9;
+    position: relative;
+    transform-style: preserve-3d;
 
     .animation {
       animation: rotate3D 30s infinite linear;
       transform-style: preserve-3d;
+      width: 160px;
+      height: 160px;
+      margin-top: -50px;
 
       &:hover {
         animation-play-state: paused;
@@ -115,16 +118,21 @@ export default {
 
     .item {
       position: absolute;
+      transform-style: preserve-3d;
     }
   }
+
+  .content-background {
+    transform-style: preserve-3d;
+  }
 }
 
 @keyframes rotate3D {
   from {
-    transform: rotateY(0deg);
+    transform: translate(-50%, -50%) rotateX(-10deg) rotateY(0deg);
   }
   to {
-    transform: rotateY(360deg);
+    transform: translate(-50%, -50%) rotateX(-10deg) rotateY(360deg);
   }
 }