3D で移動や変形

transform3d を使用して、3D で移動や変形をすることができます。

基本的に使いかたは、2D の transform と同じですが、デフォルトでは 3D表示されないので 3D表示 の設定が必要やら、遠近感・視点などの概念が入ってきて、少しややこしいですが頑張って身に付けましょう！

使いこなせると、表現力に幅がでてきます！

3D に関わるプロパティは、次のプロパティがあります。

変化時間などのパラメータを設定できる Transition（変化） プロパティ は 2D の transform と共通なので、そちらを参考にしてください

2D または 3D の表示を設定するプロパティ

デフォルトでは 3D表示 されません

3D で表示するには、transform-style プロパティ で 3D表示 に設定する必要があります

▶︎3D (3次元空間)

Z 軸が追加され、その正の値はウィンドウからユーザー側に向かって伸びており、負の値はユーザー側からウィンドウに向かってより奥に伸びています

Z 軸を真横から見た場合、ユーザー側が正の値、その逆が負の値となります

ちょっと斜め上から見たらこんな感じです。文字が書かれているほうが正になります

transform-style プロパティ

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

transform-style プロパティ の値に flat か preserve-3d を指定できます

初期値は flat のため、設定しないと 2D 表示になります

preserve-3d を指定することで、要素の基点を中心に 3D 表示されます

3D 表示したい要素の親要素に設定してあげます。

   セレクタ名(親要素) {
      -webkit-transform-style:設定値;
      transform-style:設定値;
   }

   セレクタ名(子要素) {
      transform: 設定値;
   }

Normal

transform-style : flat;

transform : rotateY(45deg);

transform-style : preserve-3d;

transform : rotateY(45deg);

transform-style : flat;

transform : rotateY(-360deg);

transform-style : preserve-3d;

transform : rotateY(-360deg);

遠近感を設定するプロパティ

transform-style プロパティは、子要素を 3D で表示するかの設定でした。

この transform-style プロパティの設定だけでは、遠近感の設定はされません。

遠近感とは、近く（閲覧者側）に配置されている物体が大きく表示され、遠くに配置されている物体は小さく表示されます。

perspective プロパティ で設定した要素の子要素のこの遠近感の度合いを設定できます。

遠近感を設定するには、perspective プロパティのほかに tranform プロパティの transform:perspective() 関数もあります。

transform:perspective() は、プロパティを設定した要素のみに遠近感を設定するという違いがあります

必要に応じて使い分けてください

perspective プロパティ

perspective プロパティ は、指定した要素には遠近感は適用されず、子要素（transformプロパティで変化を指定している要素）のみに適用されます

子要素に適用されるので、遠近感を設定要素の親要素に perspective プロパティ を指定してください

値は整数で単位は px で指定してください

透視投影による指定をします。これを指定することにより、変形に遠近効果をつけることができます。遠くのものはより小さく、近くのものはより大きく、といった感じです

下の図でいう、perspectiveの値を設定すると、移動した距離と実際にブラウザに表示される大きさとの相関（変化率）を設定することになります。

   セレクタ名(親要素) {
      -webkit-transform-style:preserve-3d;
      transform-style:preserve-3d;
      -webkit-perspective:値px;
      perspective:値px;
   }

   セレクタ名(子要素) {
      transform: 設定値;
   }

perspective の設定値によって、同じ移動量でも実際に見える大きさが変わります。

Normal

Z軸の移動量：100px

perspective:350px;

Z軸の移動量：100px

perspective:500px;

Z軸の移動量：100px

perspective:350px;

Z軸の移動量：-100px

perspective:0

transform:translateZ(50px);

perspective:350px;

transform:translateZ(50px);

perspective-origin プロパティ

perspective-origin プロパティ は、perspective プロパティ の視点（子要素を俯瞰する視点）を指定するプロパティです

初期値は perspective プロパティ を設定した要素の中心に設定されています

perspective-origin プロパティ を指定しないと、初期値が基点になります

perspective-origin プロパティ の値には基点となる X軸 と Y軸 の位置を指定します

値には、単位付き数値またはワード（left center right top center bottom）で指定してください

   セレクタ名(親要素) {
      -webkit-transform-style:preserve-3d;
      transform-style:preserve-3d;
      -webkit-perspective:値px;
      perspective:値px;
      -webkit-perspective-origin:X軸の位置 Y軸の位置;
      perspective-origin:X軸の位置 Y軸の位置;
   }

   セレクタ名(子要素) {
      transform: 設定値;
   }

Z 軸に 100px 移動します。それぞれの視点からの見え方を下記に示します。

perspective-origin:left top;

青□の左上からの視点

perspective-origin:center top;

青□の中央上からの視点

perspective-origin:right top;

青□の右上からの視点

perspective-origin:left center;

青□の左中央からの視点

perspective-origin:center center;

青□の中央中央からの視点

perspective-origin:right center;

青□の右中央からの視点

perspective-origin:left bottom;

青□の左下からの視点

perspective-origin:center bottom;

青□の中央下からの視点

perspective-origin:right bottom;

青□の右下からの視点

transform:perspective() について

transform プロパティ に perspective()関数 を指定することで遠近感の設定ができます

効果は perspective プロパティ と同じですが、適用される範囲が異なります

perspective() 関数 は指定した要素しか適用されません

値は整数で単位は px で指定してください

   セレクタ名(親要素) {
      -webkit-transform-style:preserve-3d;
      transform-style:preserve-3d;
      -webkit-perspective-origin:X軸の位置 Y軸の位置;
      perspective-origin:X軸の位置 Y軸の位置;
   }

   セレクタ名(子要素) {
      -webkit-transform:perspective(値px) 設定値（tranlateX()など…）;
      transform:perspective(値px) 設定値（tranlateX()など…）;
   }

transform 3d

3d で、移動や回転、拡大ができます。X軸、Y軸に関しては2dと同じで、Z軸の概念が追加されている感じです。

translate3d 関数（移動）

translate3dで、移動の指定ができます

3D（XYZ方向）の指定が可能です

translate3d() 関数でX軸とY軸とZ軸の移動をまとめて指定できます

translateX() 関数、translateY() 関数、translateZ() 関数を使って個別に移動距離を指定することもできます

単位は px で指定します

▶translate3d() 関数の記述

   セレクタ名 {
      -webkit-transform:translate3d(X軸方向の移動距離,Y軸方向の移動距離,Z軸方向の移動距離);
      transform:translate3d(X軸方向の移動距離,Y軸方向の移動距離,Z軸方向の移動距離);
   }

translate3d(30px,30px,50px);

translate3d()

Pen-
Pineapple-
Apple-
Pen

translate3d(30px,30px,-50px);

translate3d()

Pen-
Pineapple-
Apple-
Pen

▶translateX() 関数の記述

   セレクタ名 {
      -webkit-transform:translateX(X軸方向の移動距離);
      transform:translateX(X軸方向の移動距離);
   }

▶translateY() 関数の記述

   セレクタ名 {
      -webkit-transform:translateY(Y軸方向の移動距離);
      transform:translateY(Y軸方向の移動距離);
   }

rotate3d 関数（回転）

rotate()関数で、回転の指定ができます

rotate()関数は、要素の回転を指定します

rotateX()関数、rotateY()関数、rotateZ()関数を使ってそれぞれの方向に対して回転を指定することもできます

それぞれを続けて記述することで3D（XYZ方向）の指定が可能です

回転軸を3D（XYZ方向）で指定し、回転角度を指定できるrotate3d()関数があります

値には、回転角度を指定します

回転させる角度は、degで表します

deg は degree（ディグリー）の略で、円周を360分とした角度を表す単位です

例えば、90度回転させたいときは90degと指定します

正数だと時計回りで回転し、負数だと反時計回りに回転します

▶rotate3d() 関数の記述

3つの数値（X,Y,Zの順）で回転軸を指定し、最後の回転角度で指定した角度に回転します。

セレクタ名 {
   -webkit-transform:rotate3d(回転軸のX軸,回転軸のY軸,回転軸のZ軸, 距離回転角度deg);
   transform:rotate3d(回転軸のX軸,回転軸のY軸,回転軸のZ軸, 距離回転角度deg);
}

rotate3d(1,0,0,540deg);

rotate3d()

Pen-
Pineapple-
Apple-
Pen

rotate3d(0,1,0,540deg);

rotate3d()

Pen-
Pineapple-
Apple-
Pen

rotate3d(0,0,1,540deg);

rotate3d()

Pen-
Pineapple-
Apple-
Pen

rotate3d(1,1,0,540deg);

rotate3d()

Pen-
Pineapple-
Apple-
Pen

rotate3d(1,0,1,540deg);

rotate3d()

Pen-
Pineapple-
Apple-
Pen

rotate3d(1,1,1,540deg);

rotate3d()

Pen-
Pineapple-
Apple-
Pen

▶rotateX() 関数の記述

X軸を回転軸として回転します。上記rotate3d(1,0,0,回転角度)と同じです。

セレクタ名 {
   -webkit-transform:rotateX(回転角度);
   transform:rotateX(回転角度);
}

▶rotateY() 関数の記述

Y軸を回転軸として回転します。上記rotate3d(0,1,0,回転角度)と同じです。

セレクタ名 {
   -webkit-transform:rotateY(回転角度);
   transform:rotateY(回転角度);
}

scale 関数（伸縮）

scale()関数で、伸縮の指定ができます

scale()関数でX軸とY軸とZ軸の伸縮率をまとめて指定できます

scaleX()関数、scaleY()関数、scaleZ()関数を使って個別に伸縮率を指定することもできます

それぞれを続けて記述することで3D（XYZ方向）の指定が可能ですが、3D（XYZ方向）をまとめて指定できるscale3d()関数があります

値は数値のみで指定します

数値は、1を基準に伸縮する比率を整数または少数で指定します

▶rotate3d() 関数の記述

3つの数値（X,Y,Zの順）で回転軸を指定し、最後の回転角度で指定した角度に回転します。

セレクタ名 {
   -webkit-transform:rotate3d(回転軸のX軸,回転軸のY軸,回転軸のZ軸, 距離回転角度deg);
   transform:rotate3d(回転軸のX軸,回転軸のY軸,回転軸のZ軸, 距離回転角度deg);
}

scale3d(2,2,2);

scale3d()

Pen-
Pineapple-
Apple-
Pen

▶scaleX() 関数の記述

X軸に２倍します。上記sacle3d(2,1,1)と同じです。

セレクタ名 {
   -webkit-transform:scaleX(数値);
   transform:scaleX(数値);
}

▶scaleY() 関数の記述

Y軸に２倍します。上記sacle3d(1,2,1)と同じです。

セレクタ名 {
   -webkit-transform:scaleY(数値);
   transform:scaleY(数値);
}