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

海林

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

阅读量178

点赞数 4

文章标签： html5 css3 前端

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

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

版权

文章介绍了如何在HTML中通过JavaScript为图片添加旋转功能，通过点击按钮控制图片以90度为单位进行左转或右转，利用`transform`和`rotate`属性以及DOM操作来实现图片的动态旋转。

摘要由CSDN通过智能技术生成

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

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)'
    },