通过代码旋转网页？
通过代码旋转网页？
提问于 2010-02-12 08:37:08
我希望有一种相对简单的方法来旋转一个网页，30度左右，同时保持它的完整功能和可用性。
我完全控制页面，并可以修改它，使这更容易，如果需要的话。我不想用SVG重写整个代码，但也许javascript和canvas也能用？
有没有办法使用CSS、Javascript或其他跨浏览器的方法来实现这一点？
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-02-12 09:19:20
这是另一个基于在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
Stack Overflow用户
发布于 2010-02-12 08:42:17
嘿Adam，这将在更新版本的Firefox和Safari中处理：
body {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}对于Internet Explorer，您可以查看类似于Transformie的内容，或者阅读IE版matrix filter的文档。
Stack Overflow用户
发布于 2013-05-18 02:01:51
要旋转整个网页，您可以使用jQuery传输，并执行以下操作：
$("body").transition({rotate: "30deg"}, 6000);或者，如果你想让它立即成为静态的，你可以这样做：
$("body").css({rotate: "30deg"});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2248865
复制相关文章
相似问题