コース推薦：

CSS perspective() 関数

定義と使用法 perspective() CSS

perspective() 関数は、ユーザーが z=0 平面との距離を定義します。 transform 属性で使用されます。

例

使用 perspective() 2つの立方体にいくつかの視点効果を追加します：

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

実際に試してみる

CSS 语法

perspective(length|none)

技術的詳細

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

チュートリアル：CSS 3D 変換

参考：CSS transform 属性

参考：CSS rotate() 関数

参考：CSS rotate3d() 関数

参考：CSS rotateX() 関数

参考：CSS rotateY() 函数

参考：CSS rotateZ() 函数