以下兩行語句有什么區別？

如果大家不清楚，請聽我娓娓道來。

CCS3 中的 Transform 是設置界面樣式和動畫的一大利器。而且在 Chrome 和 FF 中還支持 3D 變換。IE9 不支持，IE10 支持。

只要是 3D 場景都會涉及視角問題和透視的問題。在 Transform 中的設置方法比較簡單：

1. 只能選擇透視方式，也就是近大遠小的顯示方式。
2. 鏡頭方向只能是平行 Z 軸向屏幕內，也就是從屏幕正前方向里看。
3. 可以調整鏡頭與平面位置：

• a) perspective 屬性設置鏡頭到元素平面的距離。所有元素都是放置在 z=0 的平面上。比如 perspective(300px) 表示，鏡頭距離元素表面的位置是 300 像素。
• b) perspective-origin 屬性規定了鏡頭在平面上的位置。默認是放在元素的中心。

下面用一個正方體（或者說骰子）向大家演示視角不同視角（perspective 以及）的差別。

鏡頭距離 z=0 平面的不同距離的效果。

鏡頭在 z 坐標固定時，x 和 y 坐標（perspective-origin）變化時的差別。

使用 CSS3 進行 3D 變換很簡單。

例如：讓一個 Div 沿 Y 軸旋轉一個角度：

上面的原始的 Div 和圖片，下面是旋轉后的效果。

第一張圖是原始狀態的 DIV，第二張圖是旋轉后的效果。

是不是效果不明顯？這是因為鏡頭離平面太遠了，所以旋轉效果不明顯?，F在我們試試 perspective 屬性。我們設置 perspect=400px。

怎么樣現在效果明顯了吧。這就是 perspective 的用途。

不過在 chrome 中發現一個問題，那就是 perspective 一定要在 rotateY（或 rotateX）的前面。如果代碼寫成下面的情況，perspective 的設置會無效。

在 FireFox 中也是這種情況。

在 mozilla 的文檔上也沒有說明這個情況?，F在還不確定是設計如此還是 Bug?？傊蠹矣玫臅r候就將 prespective 放在前面好了。