Rotate webpage via code?
Here's another solution based on the matrix filter which works in IE.
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
The css for -30 degrees would be:
.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);}Test page example:
<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>For more information on calculating the matrix cooridinates see:
http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspxhttp://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2
Hey Adam, this will handle it for newer versions of Firefox and Safari:
body { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg);}For Internet Explorer you could look into something like Transformie, or read the documentation for the matrix filter for IE.
To rotate the entire webpage you can use jQuery Transit and do something like this:
$("body").transition({rotate: "30deg"}, 6000);Or if you want it to be immediately static you can do this:
$("body").css({rotate: "30deg"});