私、htmlとcssは完全独学で覚えたのですが、一番理解に苦しんだのが「z軸」という謎の言葉。変形(transform)プロパティの説明で出てきますが、数学は中学で終わった私にとって、X(横・水平)とY(たて・垂直)なら分かってもz方向とか言われても???でした。他にもzに苦しめられている人がいると信じて、自分の復習がてら解説してみようと思います。cssの設定についてz軸は立体を表現する為に存在しているまず分かりやすくZ方向を画像にするとこうなります。なんとなくイメージできたと思うので実際に書いてみます。>に縦横200pxのシンプルな平面を2つ作り、positionでぴったり重ねてz軸だけずらしてみます。z方向の値は0が初期値。値が大きくなるほど手前に、小さくなるほど奥に配置されます。手前には枠線をつけ、奥には背景色を指定しています。-200px);}奥の方が小さく表示されているのが分かると思います。rotateで少し傾けてみると分かりやすいでしょうかcssの設定についてZ軸を指定して立体感を出すには下記2つの指定が必須です。[任意の数字]pxtransform-styleは初期値が「flat(平面)」なので「preserve-3d(立体)」を指定。絵を描く方や建築設計関係の方ならおなじみのパースです。視点からの距離を定めます。マイナスの値を設定するとエラーになります。perspectiveの値が小さい)ほど、遠近感は大きく表現されます。下のサンプルはパタンと前に倒れるシンプルなものですが、上がperspective:1000px。samplesamplesamplesample一度z軸の概念を理解してしまえば、ホバーアクションやアニメーションなどで色々使えるので、多少なりとも理解の一助になっていれば幸いです。