３D表現してみる
transformを使って変形させるCSSは以前書いたが（見てない人は以下参照）その際出てきた関数を使って遠近感がある表現を加えることが出来る。
つまり遠近感がある表現は単純に3D関数を使って変形しても“ダメ”ってこと。
子要素の表示の扱い方を指定 - transform-style
2Dで表示するか、3Dで表示するかを指定。「このプロパティは継承されない」ってことなので、要素をひっくるめた親要素に指定するのが吉のようだ。
/* 2Dで表示（基点の変更なし） */
transform-style: flat;
/* 3Dで表示（基点は要素の中心に） */
transform-style: preserve-3d;要素に対して遠近感 - perspective
奥行き（遠近感）を付けてくれる。指定した要素自体には適用されないので、要素をひっくるめた親要素に指定するのが吉のようだ。値は「px/em/rem/vh/vw…」と使える。
perspective: 値;文字だけだとピンとこないだろうが奥行き（遠近感）つまり「奥になるほど小さくなる」ってことでいいかな？
奥行きがる要素に対して視点の位置 - perspective-origin
perspectiveを指定した要素をどの位置から見たものを表示するか。
/* 単一（X軸） */
perspective-origin:X軸の位置；
/* ２方向（X軸、Y軸） */
perspective-origin:X軸の位置 Y軸の位置;- X軸・・・left / center / right / ％
- Y軸・・・top / center / bottom / ％
奥行き深さの指定 - transform:perspective
文字で表現すると結構わかりにくい。値が０（設定なし。負の数は効果なし）から値を大きくすると正面はより近くに、パースがかった部分はより遠くになるように表示される・・・ってことかな。値は「px/em/rem/vh/vw…」と使える。
transform: perspective(値);
/* これはtransformの関数なのでこんな風に続けて指定 */
transform: perspective(100px) rotateX(-30deg) rotateY(30deg);
