Widely available 安心して使用可能。すべての主要ブラウザで広くサポートされている。
アニメーション Widely available

3D Transforms

perspective・rotateX/Y/Z・translateZ・preserve-3d などを使い、要素を3D空間で操作する。カードフリップやカルーセルなど、奥行きのあるUI表現が可能になる。perspective プロパティで視点を設定し、transform-style: preserve-3d で子要素の3D配置を保持する。

トランスフォーム3D

概要

perspective・rotateX/Y/Z・translateZ・preserve-3d などを使い、要素を3D空間で操作する。カードフリップやカルーセルなど、奥行きのあるUI表現が可能になる。perspective プロパティで視点を設定し、transform-style: preserve-3d で子要素の3D配置を保持する。

対応ブラウザ

デスクトップ

Chrome 36+
Edge 12+
Safari 15.4+
Firefox 16+

モバイル

Chrome Android 36+
Safari iOS 15.4+
Firefox Android 16+

基本構文

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);
}

実務での使いどころ

  • カードフリップ

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

  • 3Dカルーセル

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

注意点

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

アクセシビリティ

  • 3D演出は前庭障害のあるユーザーに影響する可能性があるため、prefers-reduced-motion を考慮する。

参考リンク