js 怎么实现点击一次图片旋转90度，再点击再转90度呢

JavaScript019

js 怎么实现点击一次图片旋转90度，再点击再转90度呢,第1张

现在我们以这个苹果的图片作为例子

我将演示代码写在这个页面网页链接，下面解释其用法。

页面结构如图

javascript代码如下

$(function() {

var r = 0

$('img').click(function() {

r += 90

$(this).css('transform', 'rotate(' + r + 'deg)')

})

})

核心思路是控制图片的这个css属性：

   transform: rotate(360deg)

其中360deg就是360度，点一次旋转90度

<div class="upload-img-box" ref="moveWrap">

<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">

<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>

</div>

<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>

<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>

<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>

</div>