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

JavaScript024

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度

word默认的格式是竖向的，更改有两种方法，方法如下：

方法一：.在“文件”的选项下，选择“打印”，在弹出的窗口中选择“属性”，然后就可以在“属性”的“基本”按钮下选择文件的打印效果选择“横向”，就可以达到旋转90°的效果 。

方法二：在“文件”的选项下，选择“页面设置”，在弹出窗口的“页边距”下选择“方向”，进行更改，选择“横向”，也可以达到旋转90°的效果

给指定的元素添加一个 CSS 属性即可：

-o-transform: rotate(90deg)

-ms-transform: rotate(90deg)

-moz-transform: rotate(90deg)

-webkit-transform: rotate(90deg)

transform: rotate(90deg)

但仅对 IE8+ 或其他浏览器有效。

如果非得兼容 IE7 的话需要使用 filter 滤镜 DXImageTransform.Microsoft.Matrix。这个参数过于复杂，这里不展开写了，题主可以自行搜索一下相关信息。

楼上说的 jquery-rotate 在 IE7、8 上表现还可以，在 IE9 里反倒有坑，题主可以自行选择是否使用。