css3で表示中のサイトのDOM構造を3Dにして回転させるブックマークレット

css

ChromeとSafariの最新版で動きます。

  • 自動で回転
javascript:(function(){var%20url='http://ndruger.lolipop.jp/hatena/20110919/css_3d_bookmarklet.js';var%20e=document.createElement('script');e.charset='UTF-8';e.src=url;document.getElementsByTagName('head')[0].appendChild(e);})();
  • 手動で回転
javascript:(function(){var%20url='http://ndruger.lolipop.jp/hatena/20110919/css_3d_bookmarklet.js?mode=manual';var%20e=document.createElement('script');e.charset='UTF-8';e.src=url;document.getElementsByTagName('head')[0].appendChild(e);})();
説明

DOMツリー構造の子孫を辿ってcss transforms 3Dのtransform3Dを設定しています。子孫を辿るたびにz座標を増やしています。
ページの表示がDOMツリーでどのように実現されているのかが視覚的に分かるかもと思って作ったのですが、役立つケースは少なそうです。