CSS perspective() 函數

定義和用法

CSS perspective() 函數定義了用戶與 z=0 平面之間的距離。

perspective() 函數在 transform 屬性中使用。

實例

使用 perspective() 為兩個立方體添加一些透視效果：

.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() 函數