Bender prefix なしに CSS3 の transform が使える jQuery plugin
ネタ元: 公式ページ等
参考になるページ等
類似品
Tips
rotate 時のボックスモデルと座標 (2013-10-03)
ネタ元:
- BlackFlag / 2012-10-24: jQueryアニメーションでCSS3のTransformを操作して拡大縮小／回転などを実装させるいろいろ
公式ページ等 
- zachstronaut / jquery-css-transform
参考になるページ等
- All About / CSS3を使って画像や文字を任意の角度で回転させる方法
- Unformed Building / 2012-01-24: CSS Transforms についてのメモ
類似品
- Ginpen.com / 2013-04-22: CSS3のtransformを素敵に扱えるjQueryプラグインを作った。
- GoogleCode / jqueryrotate
Tips
rotate 時のボックスモデルと座標 (2013-10-03)
rotate する際、デフォルトでは transform-origin は element の中心に取られる。
この場合、boundingbox が回転前のサイズと変わってしまうが、レイアウトとして有効なボックスモデルは回転前のボックスモデルがそのまま利用されるらしい。
ここで、ちょっと厄介なのが、jQuery での扱い。
jQuery v1.10.2 と jquery-css-transform 2011.05.04 で確認した範囲では、
.prop("offsetLeft"), .prop("offsetTop"), .css("left"), .css("top"), .width(), .height() 等は回転前の left, top, width, height の値となっているようだが、なぜか .offset() や .position() は回転後の left, top の値になっている模様。
更に輪をかけてややこしいのは、IE10 未満だと CSS3 の transform に未対応なので
jquery-css-transform 使わずに
IE 独自の Matrix Filter (filter:progid:dximagetransform.microsoft.matrix) を使って
別途 fallback させようとしりした場合に、
.width(w), .height(h) は回転前の width, height に対する操作だが
.width(), .height() は回転後の width, height が返って来たりとか。
現状、この辺りは鬼門のようです。
参考:
この場合、boundingbox が回転前のサイズと変わってしまうが、レイアウトとして有効なボックスモデルは回転前のボックスモデルがそのまま利用されるらしい。
ここで、ちょっと厄介なのが、jQuery での扱い。
jQuery v1.10.2 と jquery-css-transform 2011.05.04 で確認した範囲では、
.prop("offsetLeft"), .prop("offsetTop"), .css("left"), .css("top"), .width(), .height() 等は回転前の left, top, width, height の値となっているようだが、なぜか .offset() や .position() は回転後の left, top の値になっている模様。
更に輪をかけてややこしいのは、IE10 未満だと CSS3 の transform に未対応なので
jquery-css-transform 使わずに
IE 独自の Matrix Filter (filter:progid:dximagetransform.microsoft.matrix) を使って
別途 fallback させようとしりした場合に、
.width(w), .height(h) は回転前の width, height に対する操作だが
.width(), .height() は回転後の width, height が返って来たりとか。
現状、この辺りは鬼門のようです。
参考:
タグ
コメントをかく