css实现图片自动旋转效果

TCancel

已于 2023-07-17 15:53:26 修改

阅读量1.3k

点赞数

文章标签： javascript 前端 css vue.js

于 2023-07-05 16:21:23 首次发布

本文链接：https://blog.csdn.net/u014362204/article/details/131558491

版权

<template>
  <div class="manage">
    <div class="img-body">
      <div class="main" :style="theStyle" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Management',
  components: {},
  data() {
    return {
      timer: null,
      theStyle: {

      }
    };
  },
  computed: {

  },
  created() {},
  mounted() {
    this.transform();
  },
  methods: {
    transform() {
      let index = 0;
      setInterval(() => {
        index++;
        console.log('####', index);
        this.theStyle = { transform: `rotateX(0deg) rotateY(0deg) rotateZ(${index}deg) scaleX(1) scaleY(1) translateX(0px) translateY(0px)` };
        if (index === 360) {
          index = 0;
        }
      }, 10);
    }
  }
};
</script>

<style lang="scss" scoped>
.manage {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .img-body{
    width: 94px;
    height: 94px;
    .main{
      height: 100%;
      width: 100%;
      background-image: url("~@/assets/img/test2.png");
      mix-blend-mode: normal;
      opacity: 1;
    }
  }
}
</style>

最终效果如下：