html中图⽚旋转播放,html图⽚旋转3种⽅式——
CSS3transform
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属性
.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)"
ansform="rotate(-90deg)";
css3 tranform rotate 旋转演⽰:
css 3 transform rotate