html图片旋转3种方式—— CSS3 transform

最新推荐文章于 2024-08-14 17:39:22 发布

神经兮兮的小饼

最新推荐文章于 2024-08-14 17:39:22 发布

阅读量1.2w

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/Abbey_qi/article/details/96854097

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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 旋转演示：

<!DOCTYPE html><html><head><meta charset="gb2312" /><title>css 3 transform rotate</title><style>a img{ border:none}</style></head><body><div id="rotate" style=" cursor:pointer; position:absolute; left:100px; top:100px"><a href="http://www.amazon.cn/gp/product/B006GYJ5LY/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B006GYJ5LY&linkCode=as2&tag=buyed-23"><img src="http://ec4.images-amazon.com/images/I/410Ve1e79CL._SL500_AA300_.jpg" /></a><img src="http://www.assoc-amazon.cn/e/ir?t=buyed-23&l=as2&o=28&a=B006GYJ5LY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></div><script>(function(){var element = document.getElementById("rotate");var r = 0;var i = 1;function rotate(){ r += i; if( Math.abs(r) >= 25 ) i*=-1 element.style.MozTransform = "rotate(" + r + "deg)"; element.style.webkitTransform ="rotate(" + r + "deg)"; element.style.msTransform = "rotate(" + r + "deg)"; element.style.OTransform = "rotate(" + r + "deg)"; element.style.transform = "rotate(" + r + "deg)";}var timer = setInterval(rotate,50);element.onmouseover = function(){ clearInterval(timer); timer = null;};element.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,30);};}());</script></body></html>