FirefoxでCSS3のTransFormを利用してWebページを回転、上下逆さまにする。

FirefoxでCSS3のTransFormを利用してWebページを回転、上下逆さまにする。

携帯機器で写真を撮ると意図せずに向きが回転していたりするのでそう言う画像を見る時に便利。

実は90度回転させる方法は見つけたのだが180度回転させるのが無かったので。

画像だけ回転させる事も出来るがページを回転させる。

・それぞれのリンクを右クリックしメニューからブックマークに追加して下さい。

試しにクリックして見ると面白いかも。

元に戻す

左回転

右回転

逆さま

使い易い様にブックマークの一番上にフォルダを作って入れやがると良いです。

再読み込みすれば元に戻ります。

再読み込みさせないとJavaScriptで動的に作成して表示する様なレイヤーの位置が画面外に行くことがあります。

ソースは

・元に戻す

javascript:(function(){
    var%20b=document.body;
    sh=b.offsetHeight;
    sw=b.offsetWidth;
    b.style.MozTransformOrigin='100%%20100%';
    b.style.MozTransform='rotate(0deg)%20translateY('+(0)+'px)';
    scroll(0,-sh);
})();

・左回転（参考サイトから引用）

javascript:(function(){
    var%20b=document.body;
    sh=b.offsetHeight;
    sw=b.offsetWidth;
    b.style.MozTransformOrigin='100%%200';
    b.style.MozTransform='rotate(270deg)%20translateY('+(-sw)+'px)';
    scroll(0,sw-document.documentElement.clientHeight);
})();

・右回転（参考サイトから引用）

javascript:(function(){
    var%20b=document.body;
    sh=b.offsetHeight;
    sw=b.offsetWidth;
    b.style.MozTransformOrigin='100%%200';
    b.style.MozTransform='rotate(270deg)%20translateY('+(-sw)+'px)';
    scroll(0,sw-document.documentElement.clientHeight);
})();

・逆さま

javascript:(function(){
    var%20b=document.body;
    sh=b.offsetHeight;
    sw=b.offsetWidth;
    bt=Math.max.apply(null,
        [document.body.clientHeight,
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.documentElement.clientHeight]);
    b.style.MozTransformOrigin='100%%20100%';
    b.style.MozTransform='rotate(180deg)%20translateY('+(bt)+'px)';
    scroll(sw,bt);
})();

 もっと簡単に書けそうな気がするがBODYに対しては難しいのだろうか。

しかしここまで来ると角度を入力させた方がいいような気がしてくる。

・参考

transform:rotate()

http://www.htmq.com/css3/transform_rotate.shtml

ブラウザの表示を90度回転。JavaScriptとCSSで。

http://freefielder.jp/blog/2010/02/90javascript.html

コンテンツ全体の高さを取得するJavascript

http://css-eblog.com/javascript/javascript-contents-height.html

%数字についてはASCII文字コード表をご覧下さい。

http://e-words.jp/p/r-ascii.html

以上。