通过代码旋转网页？
Posted
技术标签:
【中文标题】通过代码旋转网页？【英文标题】：Rotate webpage via code? 【发布时间】：2011-01-15 23:20:19 【问题描述】：我希望有一种相对简单的方法可以将网页稍微旋转 30 度左右，同时仍保持其功能齐全且可用。
我完全控制页面，并且可以根据需要对其进行修改以使其更容易。不过，我宁愿不要用 SVG 重写整个东西，但也许 javascript 和 canvas 可以工作？
有没有使用 CSS、Javascript 或其他跨浏览器方法的方法可以让我完成此任务？
【问题讨论】：
对于不可避免的“为什么？！”，愚人节不远了，我的客户可以在他们的一天使用一点幽默。 完全没用的+1 180 度听起来更有趣 ;) 我收到了各种类似的请求（我从事在线广告和富媒体工作）。如果使用得当，我可以看到这会很酷。 这个问题和两个答案都是由 EPIC 组成的。 （我实际上可以看到这些的合法用途，主要是散布照片等效果。） 【参考方案1】：<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>
乍一看，这段代码看起来很吓人。但是，您所要做的就是更新图像文件的路径并填写链接的 URL。当然，您还应该更新 height 和 width 属性以适合您的网站。
如果您只想旋转四个图像，则只需删除其中一个项目行。如果要添加一个，则复制并粘贴并将 items[5] 更新为 items[6] 等等。
您现在已经为将此图像旋转器添加到您的网站奠定了基础。但是，您还需要执行一个步骤才能使图像出现在页面上。找出您希望图像在页面上出现的位置并复制：
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
【讨论】：
【参考方案2】：要旋转整个网页，您可以使用 jQuery Transit 并执行以下操作：
$("body").transition(rotate: "30deg", 6000);
或者，如果您希望它立即成为静态，您可以这样做：
$("body").css(rotate: "30deg");
JS Fiddle Demo
【讨论】：
【参考方案3】：您可以使用 SVG 和 <foreignObject> 向 HTML 添加转换
<svg xmlns = "http://www.w3.org/2000/svg">
<g transform="translate(300, 0) rotate(20)">
<foreignObject x="10" y="10" >
<body xmlns="http://www.w3.org/1999/xhtml">
<iframe src="http://***.com" style="width:700px;height:700px"></iframe>
</body>
</foreignObject>
</g>
</svg>
【讨论】：
【参考方案4】：您可以在此处找到 svg 解决方案：
http://simulacrum.dorm.duke.edu/allyourgoogle.svg
这在纯 css 中也是一样的（不过目前仅适用于基于 webkit 的浏览器）：
http://a.qoid.us/google.html
【讨论】：
【参考方案5】：这是另一个基于矩阵过滤器的解决方案，适用于 IE。
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);
测试页面示例：
<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>
有关计算矩阵坐标的更多信息，请参阅：
http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2
【讨论】：
感谢跨浏览器代码，这比我预期的要多得多！ @Joel，你是为了胜利而从后面赶来的 :) 我想知道，你能不能只用ms 和歌剧的东西，然后用更简单的 -webkit-transform: rotate 和 -moz-transform: rotate或者这样做有什么好处？
@Doug，你的建议让我开始寻找这个，在此之前我不知道你可以用纯 css 旋转一个元素。当然，rotate 可以用来代替 Mozilla 和 Webkit 上的 matrix，但是，IE 的来源与其他所有不同，因此要使其像素完美可能需要操作 -moz-transform-origin。
@Joel 正确，就像我说的，很棒的链接。肯定会使用。我已经使用了较少的跨浏览器解决方案来在这里和那里小费照片，所以这会让它变得更好。谢谢！
@Doug，我能想到在所有浏览器中使用矩阵旋转方法的唯一充分理由是，如果您想在所有浏览器中使用一致的语法，如果您想调整带有 Javascript 的 M 值。 BTW -o-transform: rotate(30deg) 将在 Opera 10.50 中工作。【参考方案6】：
嘿亚当，这将为新版本的 Firefox 和 Safari 处理它：
body
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
对于 Internet Explorer，您可以查看 Transformie 之类的内容，或阅读适用于 IE 的 matrix filter 的文档。
【讨论】：
+1... 在 Firebug 中试试这个：document.body.style.MozTransform = 'rotate(-30deg)';（即时满足）
我想我无法形容这让我多么高兴。从现在开始，我要以 30 度角浏览我所有的网站。
@Tchalvak 利用这些知识将照片旋转大约 2 度，或者将几句话旋转成便利贴。 :)
@viksit Chrome 使用-webkit 命令。举个愚蠢的例子，这是我的主页旋转了 10 度（在 FF 和 Chrome/Safari 中）：pixelgraphics.us/test/rotate.html
你也应该加上 '-o-transform: rotate(-30deg)' 和 'transform: rotate(-30deg)'。以上是关于通过代码旋转网页？的主要内容，如果未能解决你的问题，请参考以下文章