CSSで画像の上下左右を入れ替える方法

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を使っている。主要ブラウザにおける閲覧例は次のとおり。


IE9 Betaでの閲覧例	Firefox 4 beta 6での閲覧例


Chrome 7開発版での閲覧例	Opera 10.70開発版での閲覧例

Safari 5.0.2での閲覧例

IEは画像をフリップさせる機能を持っているが、まだCSS3としては機能を提供していない。IE9でtransform機能がサポートされるかどうかは不透明だが、ほかの主要ブラウザがすでに実装していることと、CSS2.1への高いコミットメントを考えると、IE9の正式版がリリースされるまでには対応する可能性があるのではないかとみられる。IE9がまだサポートしていないため、当然だがIE6、IE7、IE8もこの記述はサポートしていない。