CSSだけで文字や画像を反転させる
エ・ビスコム・テック・ラボ
2009-03-26 16:16:01
-webkit-box-reflectプロパティを利用して文字や画像を反転させる方法を紹介する。このプロパティを活用すると簡単に鏡像を作成できるだけでなく、-webkit-gradient()などを活用することで、鏡像にマスク処理を施すことも可能だ。
Safari 4とGoogle Chrome 2が対応した-webkit-box-reflectプロパティを利用すると、CSSだけで文字や画像を反転し、鏡像を作成することができる。今回は、この-webkit-box-reflectプロパティでできることを紹介していきたい。
なお、Google Chrome 2はこれまでは開発版として提供されていたが、ベータ版も公開された。また、Safari 4は現在のところベータ版となっている。
反転の設定
-webkit-box-reflectプロパティの機能を確認するため、ここでは次のように画像を表示したサンプルを用意した。
サンプル（画像をクリックすると拡大します）
※ブラウザで表示を確認する
この画像を反転するには、-webkit-box-reflectプロパティで反転の方向を指定する。たとえば、右側に反転させるには「right」と指定する。すると、次のようにオリジナル画像の右側に鏡像が表示される。
画像を右側に反転させたもの（画像をクリックすると拡大します）
img {
-webkit-box-reflect: right;
}
※ブラウザで表示を確認する
指定できる反転の方向は上下左右の4方向で、それぞれ次のような値で指定する。
| 反転の方向 | 値 |
|---|---|
| 上 | above |
| 下 | below |
| 左 | left |
| 右 | right |
- ホワイトペーパー
オープンソースで実現するクラウド
HP 3PARがデータ急増時代を救う
「出入口」を固め、攻撃を防御する
2012年はDBサーバー統合始動の年！
仮想環境の確実な保護！
クラウドサービスの事業戦略に迫る
漫画で解説 クラウドのITリソース
