html中2D,3D效果的實現

　　2D

　　2D就是平時看到的平面，就是在屏幕上水平和垂直的交叉線X軸Y軸。

　　2d中的位移屬性：transform:translate(參數1，參數2)　　參數1:在X軸上移動的距離（正值右移，負值左移）參數2:在Y軸上移動的距離（正值下移，負值上移）

也能夠單獨設置XY軸，transform:translateX(),transform:translateY()。

　　2d中的縮放屬性：transform:scale(參數1，參數2)　　參數在0~0.9999中爲縮小，大於1放大，參數1：水平縮小放大　　參數2：垂直縮小放大

也能夠單獨設置XY軸，transform:scaleX(),transform:scaleY()。

　　2d中的旋轉屬性：transform:rotate():同上，不事後面的單位不是px，而是deg。也是能夠單獨設置XY軸的旋轉角度，方法同上同樣。

　　2d中的傾斜屬性：transform:skew();和旋轉相似、也是經過deg設置角度，能分別單獨設置XY軸的傾斜角度。

在上面的縮放，旋轉，傾斜都是以中心爲原點進行的，那麼咱們想改變這個原點要怎麼作呢？transform-origin:(參數1，參數2)；咱們這時就能夠經過這個屬性進行原點的設置，參數能夠是負值。

 　　3D

　　3d其實就是在2d是基礎上增長Z軸，Z軸是面向咱們的軸線，要實現3D效果，須要在父元素中創建一個3D舞臺，讓子元素在3D空間裏面進行變化。

transform-style:preserve-3d;該屬性讓元素變爲一個3D舞臺。

　　3D的屬性和2D同樣，只是增長了一條Z軸的參數。transform:translate(參數1，參數2，參數3)　　參數1:在X軸上移動的距離（正值右移，負值左移）參數2:在Y軸上移動的距離（正值下移，負值上移）參數3：在Z軸上移動的距離（正值指向屏幕外，負值指向屏幕內）

 

　　須要注意的一點是translateZ()　//不能是百分比。

　　3D的旋轉和縮放的簡寫：transform:scale3d(參數1，參數2，參數3)，transform:rotate3d(參數1，參數2，參數3)　　也能夠transform:scaleX() scaleY() scaleZ();

在3D中還有一個重要的屬性是：perspective(景深)能產生近大遠小的視覺效果（結合動畫能較好實現），該屬性通常在父元素中使用，也能夠在子元素中設置（transform:perspective();）但不能設置兩個值，否則會衝突。建議在父元素中設置，數值在900~1200之間比較合適。若是值過小你就會看不見。

　設置perspective　綠色前面的大，後面的小（紅色大小是相同的）　　　　　沒有設置 perspective 能夠看出三個同大