html中图片旋转播放,html图片旋转3种方式—— CSS3 transform

html图片旋转有3中方式：ie 滤镜，CSS3 transform，HTML5 canvas rotate

参考文章：网页中图片旋转的几种实现方式

CSS3 transform

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

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

CSS代码：

.rotate{

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

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

-webkit-transform:rotate(90deg); /* Safari and Chrome */

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

}

JS代码：

element.style.webkitTransform="rotate(-90deg)"

element.style.MozTransform="rotate(-90deg)"

element.style.msTransform="rotate(-90deg)"

element.style.OTransform="rotate(-90deg)"

element.style.transform="rotate(-90deg)";

css3 tranform rotate 旋转演示：

css 3 transform rotate