Rotate webpage via code?
I'm hoping that there's a relatively simple way to rotate a webpage a little bit, 30 degrees or so, while still leaving it fully functional and usable.
I completely control the page, and can modify it to make this easier if needed. I'd rather not re-write the whole thing in SVG, though, but perhaps javascript and canvas will work?
Is there a way using CSS, Javascript, or some other cross browser method that would allow me to accomplish this?
Solution 1:
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).aspx http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2
Solution 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.
Solution 3:
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"});
JS Fiddle Demo
Solution 4:
You can find an svg solution here:
http://simulacrum.dorm.duke.edu/allyourgoogle.svg
And this is the same in pure css (at this time only works in webkit-based browsers though):
http://a.qoid.us/google.html
Solution 5:
You can add transformations to HTML using SVG and a <foreignObject>
<svg xmlns = "http://www.w3.org/2000/svg">
<g transform="translate(300, 0) rotate(20)">
<foreignObject x="10" y="10" width="800" height="800">
<body xmlns="http://www.w3.org/1999/xhtml">
<iframe src="http://stackoverflow.com" style="width:700px;height:700px"></iframe>
</body>
</foreignObject>
</g>
</svg>