月別アーカイブ: 2月 2012

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