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

更新时间:2023-05-11 06:15:58 阅读: 评论:0

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{
-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

本文发布于:2023-05-11 06:15:58,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/581597.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:旋转   元素   缩放   允许   值来   移动   正值
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图