transformプロパティ(変形)で出来ること・まとめ

移動・回転・拡大など、要素を変形させられるtransformプロパティ。
transitionanimationプロパティと併用することで、アニメーション効果のあるサイトを簡単に作れるので便利なcssプロパティです。

transformでどういうことが出来るのか、全て簡単にまとめておきます。(マウスホバーでサンプルが動きます)

translate 移動

たて、横、前後(z方向)に要素を移動させます。z方向を利用した立体表現については「transformのZ軸」をどうぞ。

モバイルのドロワーメニューや、表示と同時にふわっと浮かび上がる演出などに使われます。width・heightなどを変化させても同様のことが出来ますが、translateの方がスムーズな動きとなります。

translateX()で横方向、translateY()で縦方向、 translateZ()は前後、 translate3d()はx,y,zを一括で指定します。
translateZだけ、分かりやすさの為に傾き入れています。

X(200px)
Y(100px)
Z( -100px)
3d
#1{
	transform: translateX(200px);
}	
#2{
	transform: translateY(100px);
}	
#3{
	transform: translateZ(-100px);
}	
#4{
	transform: translate3d(200px, 100px, 0);
}	

rotate 回転

X軸(水平方向)、Y軸(垂直方向)を中心に回転します。
X・Yの指定がない場合は時計回りに回転します。
回転軸の位置はtransform-originプロパティで指定できます。(初期値はcenter )

回転の度合いはdeg (= degree = 角度)で指定します。

X(120deg)
Y(45deg)
(360deg)
#1{
	transform: rotateX(120deg);
}
#2{
	transform: rotateY(45deg);
}	
#3{
	transfom: rotate(360deg);
}


scale 拡大・縮小

X方向、Y方向、Z方向の拡大率を変化させます。3dで一括指定。
倍率を整数で指定します。(2で倍のサイズ。0.5で半分)。

scaleZだけ少し特殊な動きになるので後で解説をはさむとして、まずはサンプルです。

X(2.2)
Y(0.5)
Z(-5)
3d
#1{
	transform: scaleX(2.2);
}	
#2{
	transform: scaleY(0.5);
}	
#3{
	transform: scaleZ(-5);
}	
#4{
	transform: scale3d(1.3, 0.4, 1.2);
}	

scaleZの注意

注意:scaleZ自体、そんな頻繁に使うプロパティでもないので、不要ならば読み飛ばしてください。自分でも書きながらかなり混乱しました。

scaleX・scaleYは要素自身の拡大率が変化するのに対し、scaleZは要素自身ではなく、(結果的に)translateZで相互関係がある要素に働きます。

分かりにくい思うので先ほどのサンプルを解説しておきます。(サンプルは疑似要素ですが、普通の子要素でも同じです。)

1・疑似要素にはtranslateZ(100px)を与え、親要素の前面にしています。

2・マウスホバーで親要素にscaleZ(-5)が追加されると、親要素とZ軸の関係がある別要素のZ方向にマイナス5倍、今回の場合、疑似要素がtranslateZ( -500px) の位置に変化します。

以下、scaleZサンプルに関係しているコード(抜粋)

親の親{
 perspective: 2000px;
 perspective-origin: 60% 150%;
}
親{
 perspective: 500px;
 transform-style: preserve-3d;
}
子(疑似要素){
 transform: translateZ(100px);
}
親:hover{
 transform: scaleZ(-5);
}

拡大「率」なので、Z軸がゼロの場合(translateZを指定していない場合)にscaleZを指定しても無効となり、元々のZ位置がマイナスの場合はscaleZの値が大きいほどZ位置は奥に下がります。(-2×5 が-10 になる道理)。

skew 反り・ゆがみ

rotateと同じく( deg)を使って、指定の角度分反らせます。
Xが横方向への反り、Yは縦方向への反りです。

X(45deg)
Y(-20deg)
#1{
	transform: skewX(45deg);
}
#2{
	transform: skewY( -20deg);
}	

perspective

立体表現の際に必須となるパース(視点からの奥行き)を指定します。
perspectiveプロパティとして独立して使うこともできますし、そちらの方が一般的だと思います。
詳細やデモについては「transformのZ軸」をご参照ください。

#{
transform: perspective(1000px);
}
または
#{
perspective: 1000px;	
}
のように指定

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年3月9日HTML/CSScss,perspective,rotate,scale,skew,transform,translate

Posted by ミフネWEB