MURASHIKI BLOG | ブログ 村式株式会社

HOME ALL INSIDE LEARN NEWS WORK 社長ブログ

IE5.5+でCSS3のtransformを使う

Pocket

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以下で動きません。

この記事を書いた人

中川尚(メガネ)

東京生まれ。幼少期はサウジアラビアで世界各国の友人と過ごす。 早稲田大学・大学院では暗号の研究に従事。情報セキュリティの職を経て村式創業に参画。自然、宇宙、日本文化、音楽、芸術、数学、仏教、神道、テクノロジーなど人智を超えてそうなものに興味がある。 夜更けになると鎌倉の裏通りに繰り出し、地元の怪しい仲間たちと酒を酌み交わしている。

タグ一覧

ALL INSIDE LEARN NEWS TOP WORK 社長ブログ