js实现图片旋转效果（js让图片旋转）

本文目录一览：

}注意：用roate实现旋转，重点在于改变坐标中心点： ctx.translate(100，45)坐标中心点计算公式：x = 左上角x + 宽度/2 y = 左上角y + 高度/2 然后translate到(x，y)即可，之后调用rotate进行旋转。

楼主搜下java3d吧，很好学的 jpg格式的图片可以用啊，你在3DMax里把它作为材质贴图贴到模型上。

说明：你必须在[原地]旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。

css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。-js实现图片旋转效果

js实现图片旋转效果（js让图片旋转）

思路：限定canvas的范围，获取到2d句柄后，可以调用scale方法进行缩放。

简单思路就是：禁止浏览器缩放；处理touch事件，当为两指操作缩放时停止事件传播；canvas方面，始终设置context的原点在canvas元素中心点；每次触发缩放就clear掉整个画布，然后使用context.scale缩放，然后全部重新画。-js实现图片旋转效果

其实，Canvas 的设置项还有许多，例如我们可以直接移动画布、旋转画布、设置全局的绘制透明度等等。这些设置还可以随时保存和恢复。要注意的一点是，所有已经画在画布上的东西，是已经定死了的，不管之后再次进行任何设置都不会再改变。-js实现图片旋转效果

canvas 元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。要使用 canvas 元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。-js实现图片旋转效果

在画布元素canvas中绘制，这是很多h5游戏引擎实现动画的方法，可以去学习一个h5的游戏引擎。还有一个是矢量图方式，svg代码，用代码控制svg元素也可以完成很好的动画效果，像djs这样的图表引擎便使用svg进行绘制。-js实现图片旋转效果

1、首先你要在html页面头部加上下面的代码，其次你要把页面中的宽度修改为百分比，不能不用固定尺寸，一些小的模块可以用固定尺寸。再就是css中要应用到媒体查询，也就是@media，不懂可以百度。

2、你的电脑有随机驱动光盘吗？在相关显示那个盘上有一个类此软件的组件（具体叫什么名字记不清了）。安装后就能调整角度。如果没有光盘，如果你的电脑是4年以内生产的，可用驱动精灵查找。如果有提示组件安装的，可下载安装。-js实现图片旋转效果

3、首先我们找到这张图片，可以看到图片显示的方向是正确的。鼠标右击，在弹出来的选择中，找到向右或者是向左旋转，按照需要进行选择，这里以向右旋转为例，点击。可以看到图片向右旋转了90度。

jqueryrotate，高级浏览器则直接使用 CSS3。

rotate是jQuery旋转rotate插件，支持Internet Explorer 0+ 、Firefox 0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现。-js实现图片旋转效果

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

rotate这只是一个对jquery扩充的插件而已，你没有那个插件你写这个参数是无效的。

不一定非要用 jquery.rotate.js 插件做呀，可以考虑使用css3的transform属性，改变rotate()中的角度参数。

旋转效果有2d旋转、3D旋转.你可以baidu搜索下css3 Transform ，就可以实现放大效果：可以通过jquery animate方法改变图片的width，height属性实现。