CSSのtransformの設定を個別に指定する

CSSのtransformで使用していたtranslate()・rotate()・scale()の設定を、個別に指定する方法を試してみます。

対応ブラウザ

translate・rotate・scaleがプロパティとして用意されています。
それぞれIEで非対応となっていますが、それ以外の主要なブラウザでサポートされています。

translate

まずtranslateプロパティを試してみますが、比較のためにtransformで設定した場合も併せて指定してみます。

<div class="sample1"></div>
<div class="sample2"></div>

translateプロパティの注意点として、transformでの場合はカンマ区切りでしたが、translateプロパティでは半角スペースでの区切りになります。

.sample1 {
	width: 100px;
	height: 100px;
	background: red;
	transform: translate(50px, 100px);
}
.sample2 {
	width: 100px;
	height: 100px;
	background: blue;
	translate: 50px 100px;
}

sample1(transformプロパティを使用)のデモページ
sample2(translateプロパティを使用)のデモページ

translateプロパティの値が1つの場合はX軸、2つの場合はX軸とY軸、3つの場合はX軸とY軸とZ軸への指定になります。
transformであったtranslateXやtranslate3dといったプロパティはありません。

rotate

次にrotateを試してみます。

.sample1 {
	width: 100px;
	height: 100px;
	background: red;
	transform: rotate(45deg);
}
.sample2 {
	width: 100px;
	height: 100px;
	background: blue;
	rotate: 45deg;
}

sample1(transformプロパティを使用)のデモページ
sample2(rotateプロパティを使用)のデモページ

scale

最後にscaleです。

.sample1 {
	width: 100px;
	height: 100px;
	background: red;
	transform: scale(0.5, 1);
}
.sample2 {
	width: 100px;
	height: 100px;
	background: blue;
	scale: 0.5 1;
}

sample1(transformプロパティを使用)のデモページ
sample2(scaleプロパティを使用)のデモページ

指定の順番

transformでの指定の際、値の順番によって適用される順番が変わるため、表示結果も変わります。

.sample1 {
	width: 100px;
	height: 100px;
	background: red;
	transform: translate(100px, 0) rotate(45deg);
}
.sample2 {
	width: 100px;
	height: 100px;
	background: blue;
	transform: rotate(45deg) translate(100px, 0);
}

sample1のデモページ
sample2のデモページ

個別のプロパティで設定する場合、順番によって表示結果が変わるということはありません。

.sample1 {
	width: 100px;
	height: 100px;
	background: red;
	translate: 100px 0;
	rotate: 45deg;
}
.sample2 {
	width: 100px;
	height: 100px;
	background: blue;
	rotate: 45deg;
	translate: 100px 0;
}

sample1のデモページ
sample2のデモページ