javascript转动,javascript旋转图片

JavaScript控制网页上一个图片转动一个角度

控制样式是CSS来实现的 JS也是修改某个DOM的CSS样式

所以你要看CSS样式是否支持旋转

IE6 IE7 IE8可以用自身带的属性来修改角度 不过只能4种角度 就是直角旋转 具体的属性忘了 你查下吧

而其他浏览器或者IE9以上包括IE9的 有CSS3的旋转属性来做 那个角度是随意的 具体的也没记清楚 你查下吧。。。

所以你只想要像微博那样的直角旋转是完全可以做兼容的 要是随意角度 IE678 单独靠CSS和JS是做不出来的

javascript如何实现图片任意角度的旋转？

可以用JAvascript改变这个图片的css来旋转他：

这个是css代码：

img {

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg); /* Opera */

}

在JAvascript里面可以先获取到这张图片 设置图片id = "box"

var img = document.getElementById('box'); 获取到这个图片并用变量记住

img.style.transform = "rotate(90deg)"; 改变这个图片的css，旋转90度

完毕！！！

javascript怎么能旋转图片任意角度

文件－－－打开，找到你要编辑的图片

打开以后呢，

再点

修改－－－－变形－－－数字变形－－－下拉菜单选”旋转”，输入你想要的角度，保存就可以了．．

但是这样，图片的突出部分会消失，如果你不想它消失的话，点

修改－－－－画布－－－符合画布

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

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

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

页面结构如图

javascript代码如下

$(function() {

var r = 0;

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

r += 90;

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

});

});

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

   transform: rotate(360deg);

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

js实现图片旋转效果

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。