画像を左右反転するBookmarklet

以前、こういうエントリーがあり
左右反転で画力がわかる
そのブックマークコメントに画像を左右反転するブックマークレットを書いたものの、（※ただしIE用）でモダンブラウザだと反転って難しいよなー、って思っていたのですが、先日のエイプリルフールでサイトをCSSで左右反転しているところがあって、そっかー、CSS3だとできるよなー、ってサックリと作ってみました。

画像を左右反転する

IE用

javascript:(function(i,j,o){for(;j<i.length;j++){o=i[j];with(o.style){filter.match(/FlipH\(\)/i)?filter='':filter='FlipH()'}}}(document.getElementsByTagName('img'),0))

モダンブラウザ用

javascript:(function(i,j,t,n,m,r,o,c){for(;j<i.length;j++){o=i[j];c=o.className;if(c.match(r)){m=n;o.className=c.replace(r,'')}else{o.className+=' scale'}o.style.cssText+='-webkit-'+t+m+'-moz-'+t+m+'-o-'+t+m+t+m}}(document.querySelectorAll('img'),0,'transform:scale(','1,1);','-1,1);',/scale/i))

アドレスバーにコピペしてエンターで、画像（img要素）を左右反転します。再度適用すると元に戻ります。

ページ全体を左右反転する

IE用

javascript:(function(d){with(d.style){(filter.match(/FlipH\(\)/i))?filter='':filter='FlipH()'}}(document.body))

モダンブラウザ用

javascript:(function(d,t,n,m,r,o,c){c=d.className;if(c.match(r)){m=n;d.className=c.replace(r,'')}else{d.className+=' scale'}d.style.cssText+='-webkit-'+t+m+'-moz-'+t+m+'-o-'+t+m+t+m}(document.body,'transform:scale(','1,1);','-1,1);',/scale/i))

こちらはページ全体を左右反転します。たまにページも反転してみたいなー、っていうときありますよね。

ちなみに

Googleなんかだとこうなってしまいます。これはページの軽量化のため、ロゴもアイコンも一つの画像にまとめて、使いまわしているので、見た目の画像とは結果が少し異なってしまいます。


あと、モダンブラウザと言いつつFirefox2系だとダメだったりします。Google Chrome,Safari,Firefox,Opera辺りは最新だと概ね大丈夫じゃないかと。

追記

2010/05/12：img要素にclass属性があった場合の不具合を修正

><