Ada*_*vis 51 javascript css svg css-transforms
我希望有一种相对简单的方法可以将网页旋转一点点,大约30度左右,同时仍然保持功能齐全和可用.
我完全控制页面,并可以修改它,以便在需要时更容易.不过,我宁愿不在SVG中重写整个内容,但也许javascript和canvas会起作用吗？
有没有办法使用CSS,Javascript或其他一些允许我完成此操作的跨浏览器方法？
Joe*_*oel 37
这是基于矩阵过滤器的另一种解决方案,适用于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>
有关计算cooridinates矩阵的更多信息,请参阅:
http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-即矩阵的滤光器？博客= 2
Dou*_*ner 30
嘿Adam,这将为更新版本的Firefox和Safari处理它:
body {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
对于Internet Explorer,您可以查看Transformie之类的内容,或阅读IE 的矩阵过滤器文档.