CSSだけで文字や画像を反転させる

エ・ビスコム・テック・ラボ
2009-03-26 16:16:01
  • このエントリーをはてなブックマークに追加

 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方向で、それぞれ次のような値で指定する。

-webkit-box-reflectで指定する反転の方向
反転の方向
above
below
left
right
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]