2012 . 10 . 07

指定したサイトを左右完全にひっくり返してしまうサイト『ReflectThis!』

ReflectThis!は指定したWebサイトの左右を反転してしまうジョークサイト。

画像も文字も綺麗に完全に反対になってしまいます。

サンプル

以前、他でも似たようなサイトを見かけたことがありましたが、たしか日本語はダメだったようなきがしましたが、今度のヤツは日本語でもまったく問題なし。

フォントもそのままの状態でひっくり返ります。

もちろんページ上のリンクも一切影響なしで、そのままWebページとして動作します。

どうなっているのかと思ってみてみたら、要はフレームで指定サイトを読み込んで、それをCSS3の『transform』を使ってひっくり返しているだけという仕掛け。実に単純！

スクリプトを使ってゴニョゴニョやっているわけではないので、どうりで表示が速い。

（CSSはこんな感じ）

body {
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);
    -prefix-transform: scale(-1, 1);
    filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
    margin: 0px;
    overflow: hidden;
    background-color: black;
}

サイトをやっている者にとっては来年のエイプリルフールのネタに使えそうなテクですね。