大家觉得js能够实现图片旋转的功能么

PerterPon 2011-07-24 05:02:14

二维平面上的旋转，不是三维平面上的旋转，刚刚看了一个html5编写的页面的各种效果，灰常绚丽，有一项就是三维平面的旋转，效果很好，赶快推进html5的普及吧

...全文

90 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

PerterPon 2011-07-24

打赏
举报

原来如此，明白了，找了很久都找不到，灰常感谢

rainsilence 2011-07-24

打赏
举报

n年前就有支持全浏览器的旋转了
以下代码支持全浏览器，且任意元素的旋转。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

var 

	userAgent = navigator.userAgent,

	isIE = /msie/i.test(userAgent) && !window.opera,

	isWebKit = /webkit/i.test(userAgent),

	isFirefox = /firefox/i.test(userAgent);



var rotate = function() {

	if (isWebKit) {

		return function(target, degree) {

			target.style.webkitTransform = "rotate(" + degree + "deg)";

		};

	} else if (isFirefox) {

		return function(target, degree) {

			target.style.MozTransform = "rotate(" + degree + "deg)";

		};

	} else if (isIE) {

		return function(target, degree) {

			degree = degree / 180 * Math.PI;

			var sinDeg = Math.sin(degree);

			var cosDeg = Math.cos(degree);

			

			target.style.filter = "progid:DXImageTransform.Microsoft.Matrix(" +

					"M11=" + cosDeg + ",M12=" + (-sinDeg) + ",M21=" + sinDeg + ",M22=" + cosDeg + ",SizingMethod='auto expand')";

		};

		

	} else {

		return function(target, degree) {

			target.style.transform = "rotate(" + degree + "deg)";

		};

	}

}();



window.onload = function() {

	var console = document.getElementById("console");

	rotate(console, 30);

}

</script>

</head>

<body >

    <div id="console" style="position:absolute;left:10px; top:10px; width:400px; height:300px; border-style:solid;border-width:1px;"></div>

</body>



</html>