一 、在元素的父元素上使用

在父元素上使用Perspective屬性可以使用透視投影視圖，在父元素上加上：

perspective:400px

表示相機距離屏幕位置為400px。默認相機對準父元素的中心，要重設相機的焦點可以使用：

perspective-origin: 30% 70% 50%

表示相機的焦點在x軸（距原點）30%，y軸70%,z軸50%處。

二、在元素上使用

在元素上使用perspective屬性可以達到正交投影視圖效果。在元素上加上：

transform: perspective(400px)

三、不使用perspective，用2D變換實現偽3D效果

在屏幕上所謂3D效果本質上還是2D效果，只不過這種2D效果通過消隱和明暗處理，投射到屏幕上，看起來像是真的有一個物體存在一樣。

所以，對于一些簡單的3D動畫，只有有限的狀態，其實可以使用2D的變換去實現，以減少編程的困難。

比如下面這種，點擊后延切線方向旋轉90度的效果：

demo

如果要3D來做，可以用perspective實現正交投影，然后用3D旋轉來實現，遺憾的是，我一下午都沒旋轉正確。用2D實現起來就很簡單，看代碼

總結

以上是生活随笔為你收集整理的CSS3 Perspective的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。