3D Transforms | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`backface-visibility`	36	12	16	15.4	36	15.4
その他
`css.properties.perspective` perspective は CSS のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて 3D に配置された要素に遠近感を与えます。	36	12	16	9	36	9
`css.properties.perspective-origin` perspective-origin は CSS のプロパティで、閲覧者の視点の位置を決めます。これは perspective プロパティによって「消点」として使われます。	36	12	16	9	36	9
CSS プロパティ
`bottom`	12	12	10	4	18	2
`center`	12	12	10	4	18	2
`left`	12	12	10	4	18	2
`right`	12	12	10	4	18	2
`top`	12	12	10	4	18	2
`none`	12	12	10	4	18	3.2
その他
`css.properties.transform-style` transform-style は CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。	36	12	16	9	36	9
CSS プロパティ
`3d` 3Dのサポート	12	12	16	4	18	3.2
CSS タイプ
`matrix3d` matrix3d() は CSS の関数で、4x4 の 3D 同次変換行列を定義します。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`perspective` perspective() は CSS の関数で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であるかのようになります。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`perspective.none` `視点(なし)`	97	97	93	15.4	97	15.4
`rotate3d` rotate3d() は CSS の関数は、要素を 3D 空間内の固定した軸を中心に、形を崩さずに回転させる座標変換を定義します。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`rotateX` rotateX() は CSS の関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる座標変換を定義します。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`rotateY` rotateY() は CSS の関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる座標変換を定義します。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`rotateZ` rotateZ() は CSS の関数で、要素の形を変化させずに Z 軸の周りを回転させる座標変換を定義します。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`scale3d` scale3d() は CSS の関数で、 3D 空間において要素を変倍する座標変換を定義します。変倍量はベクトル [sx, sy, sz] で定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`scaleZ` scaleZ() は CSS の関数で、要素を Z 軸に沿って変倍する座標変換を定義します。結果は <transform-function> データ型になります。	12	12	10	4	18	3.2
`translate3d` translate3d() は CSS の関数で、要素を三次元空間内で再配置します。返値は <transform-function> データ型です。	12	12	10	4	18	3.2
`translateZ` translateZ() は CSS の関数で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は <transform-function> データ型となります。	12	12	10	4	18	3.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

.card-container {
  perspective: 1000px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

ライブデモ

Rotatey (hover in flip)

3D Transforms RotateY (hover in flip) demo.

プレビュー全画面表示

Rotatex Skew

3D Transforms RotateX skew demo.

プレビュー全画面表示

Perspective Comparison

3D Transforms Perspective comparison demo.

プレビュー全画面表示

実務での使いどころ

カードフリップ

ホバーやクリックで裏返るカードUIを、CSSだけで実現できる。
3Dカルーセル

要素を3D空間に配置し、回転するカルーセルを構築する。

注意点

3Dトランスフォームは GPUを使用するため、モバイルデバイスでのパフォーマンスに注意。
backface-visibility: hidden を忘れると裏面が透けて見える。

対応ブラウザ

基本構文

ライブデモ

Rotatey (hover in flip)

Rotatex Skew

Perspective Comparison

実務での使いどころ

カードフリップ

3Dカルーセル

注意点

アクセシビリティ

参考リンク