CSS transforms の利用

座標空間を編集することで、CSS の変換 (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。これは、アフィン / 線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変換には回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation)が含まれます。

【訳注: ブラウザによっては、プレフィックスつきのプロパティがまだ必要です。transform プロパティのブラウザ実装状況をご覧ください。】

CSS 変換のプロパティ

CSS 変換の定義に使われる重要なプロパティが 2 つあります。transform と transform-origin です。

transform-origin: 原点位置を指定します。デフォルトは要素の左上隅で、移動できます。回転、拡大縮小や傾斜など決まった点が引数として必要な変形で使われます。
transform: 要素に適用する変換を指定します。変換のスペース区切りのリストで、合成操作の要求された順番で適用されます。

例

例：回転

この例は div 要素を右に 10 度回転します。

transform: rotate(10deg);

例：傾斜と平行移動

この例は div 要素を 10度傾斜させ、X軸に沿って150ピクセル平行移動します。

transform: skewX(10deg);
translate(150px);

3D 特有の CSS プロパティ

立体空間で CSS 変換を行うのは、もう少しだけ複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。

遠近感の準備

設定する最初の要素は遠近感 (perspective)です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。

小さくなる速度は perspective プロパティで定義します。値が小さいほど遠近感が深くなります。

`perspective:0;`	`perspective:250px;`
1 2 3 4 5 6	1 2 3 4 5 6

`perspective:300px;`	`perspective:350px;`
1 2 3 4 5 6	1 2 3 4 5 6

2 つ目の設定要素は見る人の位置で、perspective-origin プロパティを使います。デフォルトでは遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。

`perspective-origin:150px 150px;`	`perspective-origin:50% 50%;`	`perspective-origin:-50px -50px;`
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6

ここまで完了すれば、3D 空間で要素に働きかけることができます。