点击旋转按钮，实现图片旋转

林沧渊

已于 2024-03-06 09:41:49 修改

阅读量427

点赞数 4

CC 4.0 BY-SA版权

文章标签： html5 css3 前端

于 2024-03-06 09:39:24 首次发布

本文链接：https://blog.csdn.net/shenlinhai/article/details/136496529

实现点击旋转按钮，图片左右旋转

HTML里添加两个旋转按钮和一个img图片


   <button @click=transformLeft()>左旋转</button>
   <button @click=transformRight()>右旋转</button>
   <img id='img' src="*****" alt="">

通过document.getElementById（）获取图片dom,

通过style.transform= 'rotate(45deg)'来旋转图片。


    revolveX  = 0


 // 图片左旋转
    transformLeft() {
      this.revolveX  = this.revolveX -90
      const myImage = document.getElementById('img')
      myImage.style.transform = 'rotate(' + this.revolveX + 'deg)'
    },
 // 图片右旋转
    transformLeft() {
      this.revolveX  = this.revolveX +90
      const myImage = document.getElementById('img')
      myImage.style.transform = 'rotate(' + this.revolveX + 'deg)'
    },