javascript - Rotate webpage via code?

Question

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?

score 37 · Accepted Answer

IEで機能するマトリックスフィルターに基づく別のソリューションを次に示します。

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

-30度のcssは次のようになります。

.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);
}

テストページの例：

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

行列座標の計算の詳細については、以下を参照してください。

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

score 30 · Accepted Answer

ねえアダム、これはFirefoxとSafariの新しいバージョンでそれを処理します：

body {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}

Internet Explorerの場合は、 Transformieのようなものを調べるか、IEのマトリックスフィルターのドキュメントを読むことができます。

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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>

score 1 · Accepted Answer

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

javascript - Rotate webpage via code?

6 に答える 6

JS Fiddle Demo

Related

Reference