TAT.Minren CSS3 Transform 的 perspective 屬性
In 未分類 on 2012年10月29日 by view: 34,503
17

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

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

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 放在前面好了。

 

原創文章轉載請注明:

轉載自AlloyTeam:http://www.absolute-shop.com/2012/10/the-css3-transform-perspective-property/

  1. 3D 視差效果 — 好JSER 2016 年 12 月 20 日

    […] 深入了解去看這個文章 CSS3 Transform 的 perspective 屬性,時間比較久但是很經典,除了兼容性描述有變其它描述很準確。 […]

  2. mark 2016 年 6 月 2 日

    默認值是多少,這個是關鍵

  3. 董紅巖 2016 年 5 月 30 日

    好野

  4. 基于CSS3實現的紙飛機折疊飛翔動畫過程 - 軒楓閣 – 前端開發 | web前端技術博客 2015 年 5 月 12 日

    […] CSS3 Transform 的 perspective 屬性:http://www.absolute-shop.com/2012/10/the-css3-transform-perspective-property/ […]

  5. skypp 2014 年 9 月 9 日

    看完了,表示明白了些,但又發現更多疑問。國內沒一個地方能說淺顯明白的

  6. Mark 2014 年 8 月 20 日

    那 perspective 不設置,默認值是多少?

  7. cnPolan 2012 年 11 月 11 日

    講的很容易理解,thx very

  8. Windows8的WPF技術與HTML5的比較 | Tencent AlloyTeam 2012 年 11 月 9 日

    […] 9. Transform ? ? ?WPF 只支持 2D 的 translate,rotate,skew,scale。HTML5 可以支持 3D 的 rotate 和 translate。但正如第八點提到的,WPF 有專門的 3DAPI,操作也不復雜。 ? ? CSS3 中的 transform 屬性有一些特別,它的 translate、rotate、scale 表示的不是狀態而是操作,所以 最終效果受書寫順序的影響。而且 perspective 的位置也一定要寫在最前面才有效。具體請參考以下兩篇博文: CSS3 的 roate 與 rotateX 的順序研究 CSS3 Transform 的 perspective 屬性 […]

  9. HTML5 CSS3 transforme's roatae and ratateXj | Tencent AlloyTeam 2012 年 11 月 8 日

    […] 我覺得 CCS3 的 transform 中的學問很深,可以出不少面試題了。之前的文章談到過 perspective 屬性的位置問題。 […]

  10. koala 2012 年 10 月 30 日

    我本地測試 也是生效的哦。chrome 22.0.1229.94 m

    • koala 2012 年 10 月 30 日

      <div id=”animateTest” style=”-webkit-transform: rotateY(40deg) perspective(400px);”>

      • koala 2012 年 10 月 31 日

        抱歉,看錯了。在 safari 的開發文檔里確實有寫:The perspective() transform function must be the first function in the list of transforms—you must establish the perspective prior to applying the other transforms.
        In almost all cases, it is better to create a 3D container and set the -webkit-perspective property for the container element than it is to apply the perspective() transform to an element directly
        所以,這不是 bug。按照上面的建議,多創建個容器還是比較靠譜的。不過具體還得看需求怎么樣,呵呵~~

        • TAT.Minren

          TAT.Minren 2012 年 11 月 8 日

          文檔鏈接給一下。
          另外我測試了在容器上設置 perspective 好像不起作用。你測試過嗎?

          你可以用我的動畫庫試試:https://github.com/AlloyTeam/JXAnimate

  11. lightning 2012 年 10 月 29 日

    講解很詳細

    • nice 2012 年 11 月 1 日

      right

發表評論