对不同浏览器实现图片旋转。
xhtml代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title> ImageRotation </title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> 6 <style type="text/css"> 7 #demo { cursor:pointer; position:absolute;} 8 </style> 9 <script type="text/javascript" src="base.src.js"></script> 10 <script type="text/javascript"> 11 window.onload = function() { 12 rotate(document.getElementById('demo'), 10); 13 }; 14 </script> 15 </head> 16 <body> 17 <div id="container" style="width:500px;height:400px;position:relative;margin:0 auto"> 18 <div id="demo"> 19 <img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" /> 20 </div> 21 </div> 22 </body> 23 </html>
解决办法是先对验证各个不同的浏览器，对于webkit浏览器，使用CSS3的-webkit-transform{}来实现，对于ie，则使用filter属性下的progid:DXImageTransform.Microsoft.Matrix（），即DXImageTransform.Microsoft.Matrix矩阵。而其他的浏览器，这直接使用CSS3下的transform。
1 var 2 userAgent = navigator.userAgent, 3 isIE = /msie/i.test(userAgent) && !window.opera, 4 isWebKit = /webkit/i.test(userAgent), 5 isFirefox = /firefox/i.test(userAgent); 6 function rotate(target, degree) { 7 if (isWebKit) {
//使用-webkit-transform. 8 target.style.webkitTransform = "rotate(" + degree + "deg)"; 9 } else if (isFirefox) {
//使用-moz-transform 10 target.style.MozTransform = "rotate(" + degree + "deg)"; 11 } else if (isIE) { 12 //使用DXimageTransform.Microsoft.Matrix矩阵。 13 degree = degree / 180 * Math.PI; 14 var sinDeg = Math.sin(degree); 15 var cosDeg = Math.cos(degree); 16 17 target.style.filter = "progid:DXImageTransform.Microsoft.Matrix(" + 18 "M11=" + cosDeg + ",M12=" + (-sinDeg) + ",M21=" + sinDeg + ",M22=" + cosDeg + ",SizingMethod='auto expand')"; 19 } else {
//其他浏览器直接使用CSS3标准 20 target.style.transform = "rotate(" + degree + "deg)"; 21 } 22 }
(参考自CSDN）
