CSS3で画像を鏡のように反転させる

今回ご紹介するのは、

CSS３で画像を鏡に映したように反転させる方法です。

今回は、下記の画像を使用します。

xhtmlの記述は、

<p><img src="img_gazou2.gif" alt="#" /></p>

このように書きました。

この画像を反転させるためにCSS3は、

img { -webkit-box-reflect: right; }

このように設定にします。

そうすると下図の様に見えます。

-webkit-box-reflectプロパティーを使用することにより、

鏡に映したように反転させた画像に見せる事が可能です。

反転させる方向の指定方法は４つあり、

上 ： above
下 ： below
左 ： left
右 ： right

になります。

CSS３には、まだまだ他にも色々な機能がありますので、是非一度お試しください！

 完成例はこちら
（ブラウザはGoogle Chromeで表示確認をしています）

 --------------------------------------------------------------------------------

パソコンスクール KENスクール渋谷校　Webインストラクター
http://www.kenschool.jp/school/shibuya/index.html

KENスクールでCSSデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html