コードを経由してWebページを回転させますか？

StackOverflow https://stackoverflow.com/questions/2248865

質問

まだそれは完全に機能し、使用可能なままにしながら、

私は、少しのWebページを回転させるために、比較的簡単な方法、30度ほどがあることを願っています。

私は完全にページを制御し、必要に応じてこれを容易にするために、それを変更することができます。私はむしろかかわらず、SVGで全体を再書き込みませ、おそらくJavaScriptとキャンバスがうまくいくだろう？

私はこれを実現できるようになるCSS、Javascriptを、またはいくつかの他のクロスブラウザの方法を使用しての方法はありますか？

役に立ちましたか？

解決

ここでは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>

マトリックスcooridinates算出の詳細については以下を参照してください。

http://msdn.microsoft.com/en -us /ライブラリ/ ms533014（VS.85）.aspxのの のhttp：/ /www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2する

他のヒント

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

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

は、Internet Explorerの場合、あなたはのようなものの中に見ることができますTransformie に、またはマトリックスフィルタのマニュアルを読んでIEのためします。

あなたはjQueryのトランジットを使用して、このような何かを行うことができます全体のWebページを回転するには：

$("body").transition({rotate: "30deg"}, 6000);

それとも、あなたがこれを行うことができ、すぐに静的になりたい場合は：

$("body").css({rotate: "30deg"});

JSフィドルデモの

あなたはここにSVGの解決策を見つけることができます：

  

http://simulacrum.dorm.duke.edu/allyourgoogle.svgする

そしてこれは（現時点では唯一かかわらのWebKitベースのブラウザで動作）、純粋なCSSで同じです。

  

http://a.qoid.us/google.htmlする

あなたはSVGと<foreignObject>

を使用してHTMLに変換を追加することができます 
<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>

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

一見すると、このコードは威圧表示されます。しかし、あなたがしなければならないすべては、画像ファイルへのパスを更新し、リンクのURLを記入しています。もちろん、あなたもあなたのサイトに合わせて高さと幅の属性を更新する必要があります。

あなただけの4枚の画像は、単に項目の行の1つを削除、回転したい場合。あなたは1を追加したい場合は、コピーして貼り付け、更新項目[5]の項目に[6]のように。

今、あなたのサイトにこのイメージローテータを追加するための地上の仕事を築いてきました。しかし、あなたは、あなたのイメージがページに表示するために行う必要があるもう一つのステップがあります。あなたがイメージがページに表示され、中にコピーしたい場所を見つけ出すます：

<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top