クロスブラウザな回転, 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はブラウザとして軸がずれている。←これがいいたかっただけ