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

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

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

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

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

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

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

< div >で縦横200pxの正方形を2つ作り並べて表示してみます。ただし右側はtranslateZ(-200px) で、Z方向に200px下げています。

z方向の値は0が初期値。値が大きくなるほど手前に、小さくなるほど奥に配置されます。

右側の方が小さく表示されているのが分かると思います。少し傾けてみると後ろにあるのが分かりやすいでしょうか。

cssの設定について

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

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

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

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

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

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

パース:500px
パース:250px

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

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。