Z軸とかZ方向って何？という方へのかんたんな解説

私、htmlとcssは完全独学で覚えたのですが、一番理解に苦しんだのが「z軸」という謎の言葉。

主に変形（transform）プロパティの説明で出てきますが、数学は中学で終わった私にとって、X（横・水平）とY（たて・垂直）なら分かってもｚ方向とか言われても？？？でした。

 

他にもｚに苦しめられている人がいると信じて、自分の復習がてら解説してみようと思います。

z軸は立体を表現する為に存在している

まず分かりやすくZ方向を画像にするとこうなります。
cssのz軸を図解しています

なんとなくイメージできたと思うので実際に書いてみます。

< div > < / div >に縦横200pxのシンプルな平面を２つ作り、positionでぴったり重ねてz軸だけずらしてみます。ｚ方向の値は０が初期値。値が大きくなるほど手前に、小さくなるほど奥に配置されます。

手前には枠線をつけ、奥には背景色を指定しています。

 

<div class="demo"> <div></div><div></div></div>
.demo{
width:200px;
height:200px;
position:relative;
transform-style: preserve-3d;
perspective:( 1000px);
}
.demo > div{
width:100%;
height:100%;
position:absolute;
}.demo > div:first-of-type{
background:transparent;
border: #000 3px solid;
}.demo > div:nth-of-type(2){
background:rgba(0,0,0,.3);
transform: translateZ( -200px);
}

奥の方が小さく表示されているのが分かると思います。rotateで少し傾けてみると分かりやすいでしょうか

cssの設定について

Z軸を指定して立体感を出すには下記２つの指定が必須です。

  1. transform-style : preserve-3d
  2. perspective : [任意の数字]px

transform-styleは初期値が「flat(平面)」なので「preserve-3d(立体)」を指定。

perspective　は絵を描く方や建築設計関係の方ならおなじみのパースです。視点からの距離を定めます。初期値は0。マイナスの値を設定するとエラーになります。

 

たとえば、スカイツリーを間近で見るのと離れた位置から見るのとでは迫力・立体感が違うように、視点からの距離が短い（ = perspectiveの値が小さい）ほど、遠近感は大きく表現されます。

下のサンプルはパタンと前に倒れるシンプルなものですが、上がperspective:1000px。下は50pxです。

sample
sample
sample
sample

一度z軸の概念を理解してしまえば、ホバーアクションやアニメーションなどで色々使えるので、多少なりとも理解の一助になっていれば幸いです。

See the Pen
transform animation 3d by Takashi Abe (@TakeshiAbe)
on CodePen.

HTML/CSScodepen, perspective, transform, パース

Posted by abetaka