Menu
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?
368
Press the CTRL, Shift and Refresh buttons at the same time - the Refresh button looks like a curving arrow and is located just above the 3 and 4 on your keyboard. 2. In the pop-up, select "Continue." Press Continue to rotate the screen.
Syntax: transform: rotate(90deg);
The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.
90 degrees would equal to 100 gradient or 0.25 turns. Applying this property to the required element would rotate it by 90 degrees. Syntax: // Using CSS transform: rotate(90deg); // Using JavaScript element.
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
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
