2012.2.14

IE5.5+でCSS3のtransformを使う

村式ブログ

CSS3のtransformでは
・rotate (回転)
・scale (拡大縮小)
・skew (歪ませる)
・translate (移動)
が定義されていますが、IE8以下はこれに対応していません。しかしながら、IE5.5から使えるMatrix Filterを使えば同等の効果を得ることができます。

ただし、これをそのまま使うと変形の起点(transform-origin)がCSS3のtransformと違うため座標にズレが出てしまいます。座標変換コードを書こうと思ったらもうやってる人がいたので紹介します。
jQuery 2D Transformation Plugin

45度回転させるコードは以下のように記述できます。

$('.example').transform({rotate: 45});

他のプロパティも同時に変更できます。

$('.example').transform({
    rotate: '45deg',
    skew: ['10deg', '10deg'],
    scale: [1.5, 1.5],
    translate: ['20px', '20px']
}

jQueryのanimateもhookしているのでtransformのアニメーションも簡単に記述できます。

// 1秒で1回転させる
$('.example').animate({rotate: '+=360deg'}、1000); 

類似のjQueryプラグインにjquery-css-transformがありますが、現時点ではIE8以下で動きません。

この記事を書いた人

中川尚(メガネ)