ansaurus

Question

Answer 1

+24 A:

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.

Doug Neiner 2010-02-12 00:42:16

+1... Try this in Firebug: `document.body.style.MozTransform = 'rotate(-30deg)';` (instant gratification)

Daniel Vassallo 2010-02-12 00:47:11

I don't think that I can describe how happy this makes me. I am going to browse all my websites at a 30 degree angle from now on.

Tchalvak 2010-02-12 00:53:42

@Tchalvak Take this knowledge and use it to rotate a photo about 2 degrees, or a few sentences to look like a post-it note. :)

Doug Neiner 2010-02-12 00:56:08

I want to upvote twice!

Joel Potter 2010-02-12 00:59:04

Curiously - what about chrome? does that support -moz or -webkit functions?

viksit 2010-02-12 01:12:23

@viksit: chrome runs on a webkit rendering engine.

Joel Potter 2010-02-12 01:17:43

@viksit Chrome uses the `-webkit` command. For a silly example, here is my home page rotated 10 degrees (in FF and Chrome/Safari): http://pixelgraphics.us/test/rotate.html

Doug Neiner 2010-02-12 01:17:49

This is $#@!@#$ awesome !! too bad scrollbars do not rotate as well..

Gaby 2010-02-12 01:34:51

You should add '-o-transform: rotate(-30deg)' and 'transform: rotate(-30deg)' too.

Erik Dahlström 2010-02-12 07:44:02

I like the simpler degree property in your answer, but unfortunately have to choose the cross-browser version, even though it's a bit more complex for the newbie.

Adam Davis 2010-02-12 14:06:20

@Adam, no problem! If I knew about that matrix generator first, it would have been in my answer... As it was: "read the documentation" == "I have no clue, but I know this is what you use" LOL. Have fun on April 1.

Doug Neiner 2010-02-12 14:40:44

Oh I will! ` ` ` `

Adam Davis 2010-02-12 16:51:18

@Doug, Joel - thanks! Doug - thats a neat example :)

viksit 2010-02-15 19:59:38

Answer 2

+22 A:

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"&gt;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

Joel Potter 2010-02-12 01:19:19

+1 Awesome link Joel. Thanks!

Doug Neiner 2010-02-12 01:26:12

Thanks for the cross browser code, this is much more than I expected!

Adam Davis 2010-02-12 03:05:43

@Joel, and you come from behind for the win :) I wonder, could you have just used the `ms` and opera stuff, and then gone with the simpler `-webkit-transform: rotate` and `-moz-transform: rotate` or is there a benefit to doing it this way?

Doug Neiner 2010-02-12 04:46:16

@Doug, your suggestion set me looking for this, before that I didn't know you could rotate an element with plain css. Certainly the `rotate` could be used instead of `matrix` on Mozilla and Webkit, however, IE has a different origin than all the others, so to make it pixel perfect may require manipulating `-moz-transform-origin`.

Joel Potter 2010-02-12 14:32:55

@Joel right on man, like I said, awesome link. Will be using for sure. I have used the less cross browser solution for tipping photos a bit here and there, so this will make it way better. Thanks!

Doug Neiner 2010-02-12 14:42:06

@Doug, the only good reason I could think of where you might want to use the matrix rotation method in all browsers was if you wanted consistent syntax across all the browsers, if perhaps you wanted to adjust the M values with Javascript. BTW -o-transform: rotate(30deg) will work in Opera 10.50.

robertc 2010-03-28 13:34:52

Answer 3

+1 A:

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

fretje 2010-02-22 23:02:01

Answer 4

+1 A:

You can add transformations to HTML using SVG and a <foreignObject>

<svg xmlns = "http://www.w3.org/2000/svg"&gt; 
  <g transform="translate(300, 0) rotate(20)"> 
    <foreignObject x="10" y="10" width="800" height="800"> 
      <body xmlns="http://www.w3.org/1999/xhtml"&gt; 
        <iframe src="http://stackoverflow.com" style="width:700px;height:700px"></iframe> 
      </body> 
    </foreignObject> 
  </g> 
</svg>

Hannson 2010-03-17 00:23:30

ansaurus

tags:

views:

answers:

Rotate webpage via code?

related questions