CSS transformの使い方を理解して要素を変形する

CSSでtransformの使い方を理解したいと思いました。

transformを適用した要素がどのように変形するのか、transformで使用するプロパティやtransformの関数を調べて色々指定してるうちに、頭の中でtransformの使い方がまとまらなくなってきました。

transformのプロパティも関数も種類がけっこうあるので理解しきれていない部分もありますが、transformの使い方を理解して色々な動きを要素に適用できるようになりたいので、覚えたことをまとめておこうと思います。

CSSのtransformの使い方を理解する

CSSのtransformはHTMLでマークアップした要素に変化をつけるためにプロパティとして指定します。

そしてtransformプロパティには関数を指定します。

.translate{
　transform:rotate();
　transform:scale();
　transform:translate();
　transform:skew();
}

• rotateは回転
• scaleは拡大縮小
• translateは移動
• skewは歪み

上記のtransformの関数を「transform:関数()」と指定して値を指定することで、それぞれのtransform関数が持つ変形処理を実現していくのがCSSのtransformの使い方です。

CSSのtransformは種類が多いため関数のコントロール次第で何パターンにも変化する使い方ができます。

またCSSのtransformで要素を変形する種類には「2Dトランスフォーム」と「3Dトランスフォーム」があります。

• 2Dトランスフォームの場合はXY軸の2方向の変形処理
• 3Dトランスフォームの場合はXYZ軸の3方向の変形処理

CSSでtransformの使い方を理解するために、X軸、Y軸、Z軸の動きを理解し、transformプロパティでそれぞれの関数に値を指定する詳細な使い方と、どのように2Dと3Dの変形をさせる使い方をすればいいのかを一つずつ説明します。

X軸とY軸とZ軸の動きを理解

CSSでtransformの動きに必要な「X軸、Y軸、Z軸」はtransformの関数でも関数の値でも使用されています。

先にX軸、Y軸、Z軸がどのような仕組みでtransformを指定した要素に影響し変形するのか理解しておくことで、transformの使い方が理解しやすくなります。

X軸、Y軸の動きを比較できるように色違いで2つの枠の画像を用意しました。

黄色い枠がCSSのtransformを指定してないボックス。

ピンクの枠はCSSのtransformで10度時計回りに回転して斜めにしたボックス(transform:rotate(10deg)を指定)

CSSのtransformを指定してない黄色い枠は、ボックスの左上を原点にしてローカル座標系を構成します。これはブラウザ画面の左上を原点とした座標系からローカル座標系を構成した原点になっているためです。

一方でCSSのtransformを指定したピンクの枠が構成するローカル座標系は、transformを指定した枠が構成する枠の中央にセットして処理されます。

transformを指定した枠のローカル座標系だけがボックス中央になるのは、CSSのtransformを指定したことで、transform-originという初期値が「50% 50%」で設定されるからです。

そのためCSSのtransformを指定した枠は、transform:rotate(10deg)の指定により、枠中央を原点としてx軸で右方向に、y軸は下方向に、Webページに配置した要素が変形します。

X軸とY軸にZ軸が加わると奥行きの軸が追加され3Dで要素が変化します。

Z軸はブラウザが構成する3次元空間の中にtransformを指定した要素が配置されます。

そしてtransformプロパティを指定した要素が持つ2次元の空間にZ軸が拡張された奥行きのローカル座標が構成されるので、X軸、Y軸、Z軸の3D変形する処理が動作します。

X軸、Y軸、Z軸をなんとなくでも理解した上でtransform関数の使い方を一つずつ理解しておこうと思います。

rotateで回転

transformプロパティに使用するrotate()は「回転の指定」ができる関数です。

セレクタ名 {
　transform:rotate(回転角度deg);
}

CSSのtransform:rotateで要素を回転させる使い方は、回転させたい要素をセレクタにしてrotate()のカッコの中に回転する角度を値として指定します。回転させる角度は「degree」の省略形のdegを使用して値指定します。

上の画像はボーダーで囲んだdivボックスです。このdivボックスにtransformプロパティのrotate()関数の値に10degを指定して10度回転させます。

.tranceform{

transform:rotate(10deg);

　width:320px;
　height:150px;
　border:3px solid deeppink;
　margin:0 auto;
　color:gray;
　font-size:20px;
　display: flex;
　align-items: center;
　justify-content: center;
}

rotateの値を(10deg)と正数で指定した場合は時計回りで回転します。rotateの値を(-10deg)と負数で指定した場合は反時計回りに回転します。

CSSのtransformのrotate関数には次の4つの軸を加えて指定する使い方もでき、それぞれの軸の方向に回転させることができます。

• rotateX()
• rotateY()
• rotateZ()
• rotate3d()

CSSでtransformのrotateX()、rotateY()、rotateZ()、rotate3d()の使い方を含めscale、translate、skewの関数はどんな変形動作をするかCode Penに記述したCSSとHTMLを確認できるようにしました。(※表示はカーソルをあてると確認できます)

ベンダープレフィックスは適宜で使用してください。

transformのrotateX()の場合

See the Pen
zYvYOWQ by @shu (@-shu-)
on CodePen.

CSSでtransformのrotateX()の場合はX軸方向で回転し変化します。

transformのrotateY()の場合

See the Pen
qBOBWQO by @shu (@-shu-)
on CodePen.

CSSでtransformのrotateY()の場合はY軸方向に回転し変化します。

transformのrotateZ()の場合

See the Pen
yLYLBWw by @shu (@-shu-)
on CodePen.

CSSでtransformのrotateZ()の場合はZ軸方向に変化します。

rotate関数で軸を個別に指定してきましたが、rotate3d()関数を使うことでXYZ軸の変化をまとめて指定することもできます。

.tranceform:hover{
　transform: rotate3d(30,20,10,360deg);
}

rotate3dの値はXYZの順番に指定します。そしてdegで回転角度を決めて変化させる使い方ができます。

scaleで拡大縮小をする

次のtransformの使い方は、CSSのtransformプロパティにscale関数を組み合わせた場合の使い方や変化についてです。

CSSでtransformのscale関数は拡大縮小ができます。

scale関数は次の4つを使用できます。

• scaleX()
• scaleY()
• scaleZ()
• scale3d()

上記4つのscale関数を一つずつ伸縮変化させてみます。

transformのscaleXの場合

See the Pen
vYNYYYZ by @shu (@-shu-)
on CodePen.

scaleXで横に変形します。

transformのscaleYの場合

See the Pen
oNjNNjB by @shu (@-shu-)
on CodePen.

scaleYで縦に変化します。

transformのscaleZの場合

See the Pen
BaoaazP by @shu (@-shu-)
on CodePen.

scaleZで指定する場合は親要素にperspectiveプロパティを指定して遠近感を作りを変形させます。

Z軸の変化は、遠近感を与えるtransformのプロパティや関数を組み合わせた使い方をしないと動作しないことを理解しておきます。

scale()関数はX軸、Y軸、Z軸の縮小と伸縮の値を繋げて指定する使い方もできます。

scaleXYZの値を繋げて指定する場合

.tranceform:hover{
　transform: scaleX(1.5)scaleY(2)scaleZ(-40);
}

scaleの値をまとめて指定する使い方もあります。まとめて指定する使い方はscale3d関数を使用して値を指定します。

scale3dで値をまとめて指定する場合

.tranceform:hover{
　transform: scale3d(1,5,2);
}

scale3dの値はX軸、Y軸、Z軸の順番で指定します。

translateで移動させる

次のtransformの使い方は、CSSのtransformプロパティにtranslate関数を組み合わせた場合の使い方です。

translate関数は要素に移動の処理をして変化をつけることができます。translate関数には4つの指定できる種類があります。

• translateX
• translateY
• translateZ
• translate3d

まずはtranslate関数にrotateやscaleと同じように、XYZ軸の方向を単独で指定して、それぞれの方向に移動する使い方です。

transformのtranslateXの場合

See the Pen
GRpRRmd by @shu (@-shu-)
on CodePen.

translateXで横移動です。正の値で右に、負の値で左に移動します。

transformのtranslateYの場合

See the Pen
ExVxxwg by @shu (@-shu-)
on CodePen.

translateYは縦に移動します。正の値で上に、負の値で下に移動します。

transformのtranslateZの場合

See the Pen
mdeddpL by @shu (@-shu-)
on CodePen.

translateZは奥行きで手前と奥に移動します。

Z軸の変化なので、遠近感を与えるtransformのプロパティや関数を組み合わせます。

正の値で手前に、負の値で奥に移動します。

XY軸2つの方向を繋げて指定する使い方もできます。

translateでXYの値を繋げて指定

.tranceform:hover{
　transform: translateX(100px)translateY(-50px);
}

translateをXY軸2つの方向で値をまとめて指定する使い方もできます。

translateでXYの値をまとめて指定

.tranceform:hover{
　transform: translate(100px,-50px);
}

そしてtranslate関数でXYZ軸3つの方向を繋げて値指定をする使い方です。

translateでXYZの値を繋げて指定

.tranceform:hover{
　transform: translateX(100px)translateY(100px)translateZ(100px);
}

3Dのtranslate関数の値でもまとめて指定する使い方ができます。

translateでXYZの値をまとめて指定

.tranceform:hover{
　transform: translate3d(100px,100px,100px);
}

translate関数だけに限らず値の指定順を変えた場合には、変形する処理結果が変わるので理解しておくといいかと思います。

skewで歪ませる

transformに指定するskewは座標系を「歪ませる」変形処理ができる関数です。

skew関数には次の3つの指定できる関数の種類があります。

• skew
• skewX
• skewY

transformのskewXの場合

See the Pen
GRpRRdB by @shu (@-shu-)
on CodePen.

skewXで指定すると横に歪みます。

transformのskewYの場合

See the Pen
rNONNZL by @shu (@-shu-)
on CodePen.

skewYで指定すると縦に歪みます。

skewにXYの値をまとめて指定する使い方

.tranceform:hover{
　transform: skew(20deg,30deg);
}

skewXYの値をまとめて指定する場合は、値をX軸、Y軸の順番で記述します。

transform-originで原点を変更

CSSでtransformを適用すると適用した要素は、transform-originの初期値で構成してる原点を元に変形する動作をします。

しかしtransform-originの初期値で構成してる原点の位置は値を指定することで原点を変更することができます。

CSSのtransform-originプロパティの初期値の原点は2Dと3Dの初期値があります。

transform-originの初期値の原点は2Dも3Dも要素の中央配置になるわけですが、CSSでtransform-originを指定して値を変更することで原点の位置を決めることができるというわけです。

transform-originの原点の変更前と変更後の画像とHTMLとCSSを用意しました。

<span class="trans">tranceform</span><img sample.jpg" alt="" width="300" height="180">

img{
　vertical-align:bottom;
　border: 2px solid deeppink;
　transform:rotate(20deg);
}

transform-originの値を変更してない上のimg要素の場合は、transform-originの初期値が原点になるのでCSSのtransformを指定した要素の中央を原点にして変形します。

img{
　vertical-align:bottom;
　border: 2px solid deeppink;
　transform:rotate(20deg);
　transform-origin: 0% 100%;
}

一方でtransform-originの値を変更した上のimg要素の場合は、値指定0% 100%で要素の左下の辺を原点にして回転します。

transform-originの値で原点を変更する値指定にはpxや%、leftやtopで指定ができます。

transform-origin: left top;

transform-originで原点をキーワードで値指定して変更する場合は上のCSSのような使い方をして左上の辺を原点位置にしたりできます。

transformで3Dの遠近感を表現する使い方

ここまでのCSSのtransformの使い方はtransformの関数を指定して要素を変形する使い方を理解してきました。

次はCSSのtransformで3Dの遠近感を表現するために必要なtransformプロパティや子要素で3Dの遠近感を表現したい場合の使い方を理解できればと思います。

perspectiveで遠近感を表現

CSSのtransformでZ軸方向が奥行きになるのですが、Z軸方向の変形をしたい場合は、perspectiveを使用して遠近感を表現します。

perspectiveは「関数」と「プロパティ」の2つの使い方があります。

perspectiveを関数として指定して遠近感を表現する場合と、プロパティとして指定し遠近感を表現する場合では使い方が違うので、どのように指定して使えばいいか理解しておくようにします。

関数の場合(指定した要素のみ)
transform: perspective(値);

上のCSSはperspectiveを関数として指定しています。

transformのperspective関数は指定した要素のみで遠近感が表現できます。

.trance-3d:hover{
-webkit-transform: perspective(500)translateZ(-200px);
}

例えば、ホバーする要素にperspective(500px)と指定して値を500pxにしたとします。

そしてtranslateZ(-200px)も繋げて指定した使い方をすると、perspectiveの値の500px分の遠近感が表現されながら、translateZで奥の方向に200px分ホバーしながら要素が移動します。要素が沈み込む感じです。

プロパティの場合(親要素で指定して子要素だけに適用)
perspective:500px;

一方でperspectiveプロパティの場合は親要素に指定します。

perspectiveプロパティを親要素に指定することで、その子要素の操作をできます。

個人的にperspectiveプロパティの場合を色々試してみたけど、思ったような動作をしてくれない時があったので理解に苦しんんだ結果、perspective関数が使いやすと思いました。

perspectiveプロパティの使い方については、もう少し勉強しておこうと思います。

perspective-originで投影位置を変更

perspective-originは遠近感を表現するCSSでperspectiveプロパティを指定して透視投影というのが適用されたときの投影の中心位置を変更することができます。

perspective-originはCSSのプロパティです。

初期値はX軸とY軸の方向の位置で要素の中心にセットされます。

例えば子要素が2つあって、子要素の1つにrotateY(60deg)、もう一つはrotateY(-60deg)で親要素の中で回転処理をした場合、perspective-originの初期値によって2つの子要素は親要素の中心にセットされます。

このときの中心位置を、たとえばperspective-originの値に「0% 50%」に変更すると投影の位置は親要素の左辺から50%の位置に変更できる。という使い方ができます。

位置を変更する値

pxや%そして「left center right top center bottom」のキーワードで指定できます。

transform-styleで子要素を立体的にする

CSSのtransform-styleプロパティで子要素を2Dで表示するか、3Dで表示するかを指定できます。

<div class="hoge">
　<div class="tranceform">tranceform</div>
</div>

.hoge{
　transform-style:preserve-3d;
　background:gray;
}

.tranceform{
　width:320px;
　height:150px;
　border:3px solid deeppink;
　margin:100px auto;
　color:pink;
　font-size:20px;
　display: flex;
　align-items: center;
　justify-content: center;
　transition-duration: 1s;
}

.tranceform:hover{
　transform: rotate3d(30,30,30,360deg);
}

使い方は3D表示させたい要素の親要素にtransform-styleプロパティを指定しpreserve-3d関数を指定してください。

transform-style:preserve-3d;

transform-style:preserve-3dを親要素に指定した場合の立体的な動きは、transform-style:preserve-3d;の指定を無くした場合の動きと比べたら理解しやすかったのでcode penで確認できるようにしました。

See the Pen
NWGWWeZ by @shu (@-shu-)
on CodePen.

親要素にpreserve-3d;を指定した場合、ホバーする要素は親要素を突き抜けて3Dで回転処理します。

See the Pen
qBOBEXy by @shu (@-shu-)
on CodePen.

親要素にpreserve-3d;を指定しない場合は親要素の表面で回転処理します。

transform-styleは指定できる値が2つあります。

1つはpreserve-3d

preserve-3dを使うと3D表示です。

2つ目はpreserve-flat

preserve-flatはtransform-styleの初期値で2次元の処理になります。

なので先ほどのpreserve-3dを指定して親要素を突き抜けた子要素は、親要素でpreserve-flatに指定を変えるだけで、親要素を突き抜けない2D回転処理の回転に変更できます。