通过代码旋转网页？
我希望有一个相对简单的方法来旋转网页一点点，30度左右，同时仍然使其function齐全和可用。
我完全控制了页面，并且可以修改它，以便在需要时使这更容易。 不过，我宁愿不重写在SVG中的所有东西，但也许JavaScript和canvas将工作？
有没有办法使用CSS，Javascript或其他一些跨浏览器的方法，让我做到这一点？
这是基于在IE中工作的matrixfilter的另一个解决scheme。
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-30度的CSS将是：
.rotate { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand'); -moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); -webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); -o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); } testing页面示例：
<html> <head> <style type="text/css" media="screen"> body { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand'); -moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); -webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); -o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); } </style> </head> <body> <p>Testing</p> <p><a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html">Matrix calculator here</a></p> </body> </html>
有关计算基质cooridinates的更多信息，请参阅：
http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-即matrix的滤光器？博客= 2
嘿亚当，这将处理它的新版本的Firefox和Safari：
body { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); }
对于Internet Explorer，您可以查看诸如Transformie之类的东西，或者阅读IE的matrixfilter的文档。
要旋转整个网页，您可以使用jQuery Transit并执行如下操作：
$("body").transition({rotate: "30deg"}, 6000);
或者如果你想立即静态，你可以这样做：
$("body").css({rotate: "30deg"});
JS小提琴演示
你可以在这里find一个svg解决scheme：
这在纯CSS中是一样的（目前只能在基于webkit的浏览器中运行）：
您可以使用SVG和<foreignObject>将转换添加到HTML
<svg xmlns = "http://www.w3.org/2000/svg"> <g transform="translate(300, 0) rotate(20)"> <foreignObject x="10" y="10" width="800" height="800"> <body xmlns="http://www.w3.org/1999/xhtml"> <iframe src="http://stackoverflow.com" style="width:700px;height:700px"></iframe> </body> </foreignObject> </g> </svg>
<script language="JavaScript1.2"> var howOften = 5; //number often in seconds to rotate var current = 0; //start the counter at 0 var ns6 = document.getElementById&&!document.all; //detect netscape 6 // place your images, text, etc in the array elements here var items = new Array(); items[0]="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300' width='300' border='0' /></a>"; //a linked image items[1]="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300' width='300' border='0' /></a>"; //a linked image items[2]="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300' width='300' border='0' /></a>"; //a linked image items[3]="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300' width='300' border='0' /></a>"; //a linked image items[4]="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300' width='300' border='0' /></a>"; //a linked image items[5]="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300' width='300' border='0' /></a>"; //a linked image function rotater() { document.getElementById("placeholder").innerHTML = items[current]; current = (current==items.length-1) ? 0 : current + 1; setTimeout("rotater()",howOften*1000); } function rotater() { if(document.layers) { document.placeholderlayer.document.write(items[current]); document.placeholderlayer.document.close(); } if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current] if(document.all) placeholderdiv.innerHTML=items[current]; current = (current==items.length-1) ? 0 : current + 1; //increment or reset setTimeout("rotater()",howOften*1000); } window.onload=rotater; //--> </script>
乍一看，这个代码可能会出现恐吓。 但是，您只需更新图像文件的path并填写链接的URL即可。 当然，你也应该更新高度和宽度属性，以适应你的网站。
如果您只需要四个图像旋转，那么只需删除其中一个项目行。 如果你想添加一个，那么复制粘贴并更新项目[5]到项目[6]等等。
现在，您已经为将此图像旋转器添加到您的网站奠定了基础。 但是还有一个步骤需要你的图片出现在页面上。 找出图像出现在页面上的位置并复制到：
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
;){kind=link}