通过代码旋转网页？

我希望有一种相对简单的方法可以将网页旋转一点点,大约30度左右,同时仍然保持功能齐全和可用.

我完全控制页面,并可以修改它,以便在需要时更容易.不过,我宁愿不在SVG中重写整个内容,但也许javascript和canvas会起作用吗？

有没有办法使用CSS,Javascript或其他一些允许我完成此操作的跨浏览器方法？

1> Joel..：

---

这是基于矩阵过滤器的另一种解决方案,适用于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);
}

测试页面示例:

  
    
  
  
    
Testing
    
Matrix calculator here
  

有关计算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

2> Doug Neiner..：

---

嘿Adam,这将为更新版本的Firefox和Safari处理它:

body {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}

对于Internet Explorer,您可以查看Transformie之类的内容,或阅读IE 的矩阵过滤器文档.

---

+1 ...在Firebug中尝试:`document.body.style.MozTransform ='rotate(-30deg)';`(即时满足)

---

我不认为我能描述这让我感到高兴.从现在开始,我将以30度的角度浏览我的所有网站.

---

@Tchalvak利用这些知识并使用它来旋转约2度的照片,或几句话看起来像便利贴.:)

---

@viksit Chrome使用`-webkit`命令.对于一个愚蠢的例子,这里是我的主页旋转了10度(在FF和Chrome/Safari中):http://pixelgraphics.us/test/rotate.html

---

你也应该添加'-o-transform:rotate(-30deg)'和'transform:rotate(-30deg)'.