クロスブラウザな回転, fix jquery 1.4.4 over!
へこむ話やね
//デモを見栄えよく見せるために適当に回転したりする.
setInterval(function(){
var deg = Math.floor( Math.random() * 1000 )
$('#target').animate({rotate: deg});
}
,
3000
);
3つの指定方式(どれでもOK)
テストテスト
あいうえお
$('#target1').rotate(45);
45度回転 (rotate命令)
$('#target1').css({rotate: '72deg' });
72度回転 (cssのオレオレプロパティ )
$('#target1').css({transform: 'rotate(256deg)'});
256度回転 (transform)
ぐるぐる
テストテスト
あいうえお
$('#target2').rotate( $('#target2').rotate() + 10);
+10度回転させる
$('#target2').rotate( $('#target2').rotate() - 10);
-10度回転させる
$('#target2').rotate(0); $('#target2').animate({rotate: 360});
一回転
ぐるぐる長方形
テストテスト
あいうえお
$('#target5').rotate( $('#target5').rotate() + 10);
+10度回転させる
$('#target5').rotate( $('#target5').rotate() - 10);
-10度回転させる
$('#target5').rotate(0); $('#target5').animate({rotate: 360});
一回転
拡大縮小
テストテスト
あいうえお
$('#target3').scale( $('#target3').scale() + 0.2);
+0.2でかくする
$('#target3').scale( $('#target3').scale() - 0.2);
-0.2でかくする
$('#target3').animate({scale: 2}).animate({scale: 1});
びよーん
回転しながらでかっかくなって引っ込んだり
テストテスト
あいうえお
びよーん
いろいろ
http://p2b.jp/200912-CSS3-Transform-for-IE8 の計算式を参考にさせてもらっています。
ソースコード一式をzipでダウンロード
IEはブラウザとして軸がずれている。←これがいいたかっただけ