|
Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. |
CSS3で導入される機能のひとつにtransformがある。この機能を使うと要素を回転させたりスケールさせたり任意の位置へ移動させるといったことが簡単に実現できるようになる。特に回転やスケールはこの機能を示すわかりやすい機能であるため、さまざまなブログでサンプルコードと実行例が紹介されている。
そうした機能紹介のひとつになるが、mir.aculo.us JavaScript with Thomas Fuchs - Flipping images with just CSSにおいてtransform機能を画像のフリップに使う方法が紹介されている。フリップは画像の上下を逆転させたり、左右を逆転させる処理を意味している。Flipping images with just CSSで紹介されているサンプルコードをChromeやSafariのみならず、ほかのブラウザにも適用できるようにしたHTMLファイルを次に掲載する。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3 Transform Flippingデモ</title>
<style type="text/css">
.flip-horizontal {
transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
}
.flip-vertical {
transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
}
</style>
</head>
<body>
<img src="logo.jpg"/><br>
<img src="logo.jpg" class="flip-horizontal"/><br>
<img src="logo.jpg" class="flip-vertical"/>
</body>
</html>
今のところtransformはベンタプレフィックスが必要。Firefoxが-moz-transform、ChromeやSafariが-webkit-transform、Operaが-o-transformを使っている。主要ブラウザにおける閲覧例は次のとおり。
IEは画像をフリップさせる機能を持っているが、まだCSS3としては機能を提供していない。IE9でtransform機能がサポートされるかどうかは不透明だが、ほかの主要ブラウザがすでに実装していることと、CSS2.1への高いコミットメントを考えると、IE9の正式版がリリースされるまでには対応する可能性があるのではないかとみられる。IE9がまだサポートしていないため、当然だがIE6、IE7、IE8もこの記述はサポートしていない。