vue3项目将图片正时针、逆时针旋转

点击按钮，让某个图片正时针或者逆时针旋转，我使用的是css3中transform 和transition 属性，动态给图片添加样式，当触发正时针或者逆时针旋转按钮的时候，给该图片的属性进行赋值即可，来看下具体是如何实现的吧

<template>
      //要旋转的图片，我这个是接口循环输出的
      <img
         :style="{
          ...styleImg,
           width: `${w}px`,
           height: `${h}px`,
         }"
           :src="item.img"
           alt=""
           ref="imagePig"
           class="imge"
            />


     <img src="../assets/u200.png" alt="" @click="rotate_left" />//逆时针旋转按钮
     <img src="../assets/u180.png" alt="" @click="rotates_right" />//顺时针旋转按钮
</template>

<script setup>
     // 旋转
    const styleImg = reactive({
      transform: "",
      transition: "",
    });
    // 逆时针旋转
    const deg = ref(0);
    const rotate_left = () => {
      if (degs.value != 0) {
        degs.value -= 90;
        styleImg.transform = `rotateZ(${degs.value}deg) scale(1.2)`;
        styleImg.transition = "0.5s";
      } else if (degs.value == 0) {
        deg.value += 90;
        styleImg.transform = `rotateZ(${-deg.value}deg) scale(1.2)`;
        styleImg.transition = "0.5s";
      }
    };
    // 正时针旋转
    const degs = ref(0);
    const rotates_right = () =>{
      if (deg.value != 0) {
        deg.value -= 90;
        styleImg.transform = `rotateZ(${-deg.value}deg) scale(1.2)`;
        styleImg.transition = "0.5s";
      } else if (deg.value == 0) {
        degs.value += 90;
        styleImg.transform = `rotateZ(${degs.value}deg) scale(1.2)`;
        styleImg.transition = "0.5s";
      }
    };
</script>