Rotate webpage via code?
JavascriptCssSvgCss TransformsJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
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 - Javascript
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 - Javascript
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):
Solution 5 - Javascript
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>
Solution 6 - Javascript
<script language="JavaScript1.2">
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
// place your images, text, etc in the array elements here
var items = new Array();
items[0]="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[1]="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[2]="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[3]="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[4]="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[5]="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300' width='300' border='0' /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items[current];
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}
function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items[current]);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
if(document.all)
placeholderdiv.innerHTML=items[current];
current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>
At first glance, this code can appear intimidating. However, all you have to do is update the path to the image files and fill in the URLs for the links. Of course, you should also update the height and width attributes to fit your site.
If you only want four images to rotate, then simply delete one of the item rows. If you want to add one, then copy and paste and update items[5] to items[6] and so on.
You've now laid the ground work for adding this image rotator to your site. But there is one more step you need to do for your images to appear on the page. Figure out where you want the images to appear on the page and copy in:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>