CODEWITHSUNDEEP
javascriptcsssvgcss-transforms
Adam Davis
Adam Davis

Reputation: 93625

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?

Upvotes: 52

Views: 12539

Answers (6)

Mahdi Abdi
Mahdi Abdi

Reputation: 692

<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>

Upvotes: 1

Gaff
Gaff

Reputation: 5667

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

Upvotes: 2

hannson
hannson

Reputation: 4525

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>

Upvotes: 1

fretje
fretje

Reputation: 8382

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

Upvotes: 1

Joel
Joel

Reputation: 19368

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

Upvotes: 37

Doug Neiner
Doug Neiner

Reputation: 66221

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.

Upvotes: 30

Related Questions