CSS 座標変換

CSS 座標変換 (CSS transforms) は、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に座標変換するかを定義します。

CSS 座標変換の動作

下の枠内のスライダーを使うと、 3D 空間での立方体の平行移動、回転、変倍、歪めの CSS 座標変換のプロパティを変更できます。立方体を 3D 空間内で移動させながら、 3D 位置 (0, 0, 0) にある z:0px とラベル付けされた要素との相互作用に注目してください。

また、 perspective スライダーを使って、立方体のコンテナーの perspective プロパティを変更することができます。

perspective-origin スライダーは、ビューの消点を決定するために、閲覧者が3D空間のどこを見ているかを決定します。この消点は小さな赤い点で示されます。これらのスライダーを変更することで、立方体自体を動かすことなく、頭を上下左右に動かして立方体のさまざまな部分を見ることができると想像してください。

backface-visibility チェックボックスは、立方体の裏面を visible （表示）に設定するか、hidden （非表示）に設定するかを決定します。

上の例の立方体は 6 つの <div> 要素で構成されており、すべて CSS でスタイル設定されて立方体の面を構成しています。立方体は 2D や 3D のキャンバスコンテキストを使用して描画されていないので、他の DOM 要素を検査するのと同じように、ブラウザーの開発者ツールで立方体の面を検査することができます。ブラウザー開発者ツールの要素ピッカーを使用して、立方体の位置と回転を変換しながら、立方体のさまざまな面を調べてみてください。

メモ: 3D 回転を含む座標変換を適用する場合、順序はが座標変換結果に影響します。上の例では、座標変換は平行移動、変倍、回転、歪めを行います。回転は X → Y → Z の順に適用されます。

この例のソースを GitHub で確認できます。

リファレンス

プロパティ

関数

データ型

ガイド

CSS 座標変換の利用

CSS でスタイル付けされた要素をどのように座標変換するかについての手順を追ったチュートリアルです。

座標系

CSS オブジェクトモデルでピクセル位置を定義する方法を説明します。

パフォーマンスの基礎: CSS 座標変換の使用

ウェブパフォーマンスの基礎について、 CSS 座標変換がどのようにパフォーマンスを向上させることができるかを含め、概説します。

ウェブの行列演算

オブジェクトの座標変換を行列で表す方法を説明しています。

関連する概念

仕様書

Specification
CSS Transforms Module Level 1
CSS Transforms Module Level 2

関連情報