DevToolBox

CSS Perspective ジェネレーター

3Dパースペクティブ効果を視覚的に作成。リアルタイムプレビューでCSSを生成します。

パースペクティブ設定

Transform Origin

プレビュー

3D Box

生成されたCSS

/* 親要素に適用 */
.perspective-container {
  perspective: 1000px;
}

/* 3D変形する要素に適用 */
.transformed-element {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
  transform-origin: 50% 50%;
}

CSS Perspectiveについて

  • • perspective: 親要素に適用する視点の距離（値が小さいほど強い3D効果）
  • • rotateX: X軸（横軸）を中心とした回転
  • • rotateY: Y軸（縦軸）を中心とした回転
  • • rotateZ: Z軸（奥行き軸）を中心とした回転
  • • translateZ: 奥行き方向への移動（正の値で手前、負の値で奥）
  • • transform-origin: 変形の基準点（デフォルトは中心の50% 50%）