css3环形图片倾斜旋转3D动画

 

 视觉效果是这样，然后底下的环一直在转，类似于斗罗大陆的魂环

<template>
 <div class="container">
     <div class="wrap">
         <img  class="back" src="./quan2.png" alt="" srcset="">
         <div class="bg-a"></div>
     </div>
 </div>
</template>

<script setup>
import {defineComponent, defineAsyncComponent, ref, reactive,onMounted,toRefs, markRaw,shallowRef,getCurrentInstance} from 'vue';
</script>
<style lang="less" scoped>
   .bg-a{
          width: 300px;
          height: 300px;
          background: yellow;
          position: relative;
          top: -473px;
          left: 33px;
        }
.container{
    width: 600px
}
.wrap{
    width: 364px;
    transform: rotate3d(1, 0, 0, 76deg);
    margin-left: 200px;

    .back{
        animation: rotate-reverse 40s linear 2s infinite normal;
    }
}
@keyframes rotate-reverse {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}
</style>
<style lang="less">
    
</style>

设计思路:

让元素的外层X倾斜,然后让元素沿着Z轴旋转