css 3d圆旋转

• Z时代
• 2024-03-15
• 分类：IT

这是一个旋转的圆盘，然后四个小圆旋转的时候，会变成片状怎么解决不变成片呢

<template>
  <div class="pic" :class="deg === 90 ? 'clas' : ''">
    <img
      @click="switchData(1)"
      :style="{ marginTop: top2 + 'px' }"
      class="img"
      src="../../../assets/screen/lsow-nav-icon1.jpg"
    />
    <img
      @click="switchData(2)"
      :style="{ marginTop: top2 + 'px' }"
      class="img"
      src="../../../assets/screen/lsow-nav-icon2.jpg"
    />
    <img
      @click="switchData(3)"
      :style="{ marginTop: top2 + 'px' }"
      class="img"
      src="../../../assets/screen/lsow-nav-icon3.jpg"
    />
    <img
      @click="switchData(4)"
      :style="{ marginTop: top2 + 'px' }"
      class="img"
      src="../../../assets/screen/lsow-nav-icon4.jpg"
    />
    <p :style="{ transform: 'rotateX(' + deg + 'deg)', marginTop: top + 'px' }">
      <img
        v-for="(item, index) in 10"
        :key="index"
        src="../../../assets/screen/bgg.jpg"
      />
    </p>
  </div>
</template>
<script>
import $ from "../../../assets/screen/js/jquery-1.11.0.min.js";
export default {
  data() {
    return {
      top: -200,
      deg: 0,
      top2: -100,
    };
  },
  mounted() {
    setTimeout(() => {
      var imgL = $(".pic .img").size();
      var deg = 360 / imgL;
      $(".pic .img").each(function (i) {
        $(this).css({
          transform: "rotateY(" + i * deg +  "deg) translateZ(200px)",
        });
        $(this).attr("ondragstart", "return false");
      });
    }, 500);
    setTimeout(() => {
      let timer = setInterval(() => {
        if (this.top === -100) {
          if (this.deg === 90) {
            clearInterval(timer);
          } else {
            this.deg = this.deg + 10;
          }
        } else {
          this.top = this.top + 10;
        }
        if (this.top2 !== 0) {
          this.top2 = this.top2 + 10;
        }
      }, 100);
    }, 800);
  },
  methods: {
    switchData(val) {
      this.$emit("switchData", val);
    },
  },
};
</script>
<style lang="scss" scoped>
.pic {
  width: 50px;
  height: 10px;
  margin: 50px auto 0;
  position: relative;
  /*transform 旋转元素*/
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
}
body {
  background-color: #66677c;
}
.pic .img {
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform-style: preserve-3d;
  // transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
  animation: rotate 15s linear infinite;
}
.pic p {
  width: 340px;
  height: 340px;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -200px;
  margin-left: -170px;
  border-radius: 170px;
  transform: rotateX(0deg);
  img {
    width: 340px;
    height: 340px;
    position: absolute;
  }
}
.clas {
  animation: rotate 15s linear infinite;
  transform-style: preserve-3d; /*表示所有子元素在3D空间中呈现*/
  cursor: pointer;
  // .img:hover {
  //   animation-play-state: paused
  // }
}
.clas:hover {
  animation-play-state: paused;
}
@keyframes rotate {
  0% {
    transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
  }
  100% {
    transform: perspective(800px) rotateX(-10deg) rotateY(360deg);
  }
}
</style>

以上是 css 3d圆旋转 的全部内容， 来源链接： utcz.com/p/936758.html