jQueryでのベンダープレフィックスの注意点

jQueryのバージョンが古いサイトでtransformを使おうとしたときに少し詰まったのでメモ。

うまくいかなかった場合のサンプルコード

jQueryのバージョンは1.6で、クリックするとtransformで回転させる処理を実装します。
transformの対応ブラウザはこちらから確認ください。

HTML

<div id="sample">クリックで<br>回転</div>

CSS

#sample {
	width: 100px;
	padding: 30px 0;
	text-align: center;
	background: #f00;
	cursor: pointer;
}

IE9とスマホでも対応させるため、以下のようにベンダープレフィックスを付与します。

JavaScript

$(function() {
	var rotate = 0;
	$('#sample').click(function() {
		rotate += 10;
		$(this).css({
			'-ms-transform': 'rotate(' + rotate + 'deg)',
			'-webkit-transform': 'rotate(' + rotate + 'deg)',
			transform: 'rotate(' + rotate + 'deg)'
		});
	});
});

うまくいかなかった場合のデモページ
スマホでは回転できましたが、IE9では回転ができませんでした。
　

対応後のサンプルコード

ベンダープレフィックスの指定方法を変えるとうまくいきました。

JavaScript

$(function() {
	var rotate = 0;
	$('#sample').click(function() {
		rotate += 10;
		$(this).css({
			'msTransform': 'rotate(' + rotate + 'deg)',
			'webkitTransform': 'rotate(' + rotate + 'deg)',
			transform: 'rotate(' + rotate + 'deg)'
		});
	});
});

この指定方法だとスマホ・IE9共に回転できました。
対応後のデモページ

jQuery1.8を使用した場合

jQuery1.8からはベンダープレフィックスが自動で付加されるようなので、特に指定がなくても回転しました。

JavaScript

$(function() {
	var rotate = 0;
	$('#sample').click(function() {
		rotate += 10;
		$(this).css({
			transform: 'rotate(' + rotate + 'deg)'
		});
	});
});

jQuery1.8を使用した場合のデモページ
　

【参考サイト】

• jQueryで画像を回転(transform:rotate) on IE9 – ksino’s diary
• jQuery 1.8 になって CSSベンダープレフィックスが自動で追加されるようになったみたいなので試してみる | ホームページ作成・WEB制作会社 | 東京都江東区のBRISK