css 3.0中涉及2d和3d的關鍵變形屬性為：transform
transform具有改變的意思，在對元素的位移、縮放、旋轉中發揮重要的作用,通常在對元素進行改變時需要對元素進行定位，在父元素中設定position:relative;或者position:fixed來固定父元素，再子元素設定。
position:absolute來在父元素裡面移動變形。
position屬性具有定位功能，設定物件的定位。
position的屬性值：
static 預設值,元素會正常顯示。
absolute 相對于父元素的絕對定位，脫離文件流，不佔據空間，當沒有父元素時會以html元素來參 照。
relative 相對與預設位置（自身的位置）的相對定位，不會破壞文件流但依然會佔據原本的空間。
fixed 相對與瀏覽器的絕對定位，脫離文件流但不佔據空間。
sticky 俗稱粘性定位，是relaticve和fixed的結合體,當元素顯示在螢幕介面時是relative，可當元素顯示的位置滾動出螢幕介面時就是fixed，通俗點講就是滾動劃出螢幕時依然粘在螢幕邊上。
translate（） 水平、垂直位移
scale（） 縮放
rotate（） 旋轉
skew() 傾斜
2d功能函式（在介面中以水平x軸和垂直y軸為參考線）
2d-位移 transform:translate(引數1，引數2)
引數1：位於x軸移動 引數2：位於y軸移動 （正值：往座標軸x右方和y下方移動。負值：往座標軸x軸左方和y軸上方移動。）
2d-縮放 transform:scale(引數1，引數2)
引數1：位於x軸縮放 引數2：位於y軸縮放 （引數值：0-0.9999 縮小； 大於1：放大）
2d-旋轉 transform：rotate(引數1，引數2) 引數單位：deg
rotatex(引數) 元素圍繞x軸以給定的度數旋轉
rotatey(引數) 袁術圍繞y軸以給定的度數旋轉
2d-傾斜 transform:skew(引數1，引數2)
以元素的中心位置圍繞x軸和y軸傾斜
3d功能函式（在介面中以水平x軸和垂直y軸為參考線，垂直於螢幕的方向多出z軸，靠近螢幕是正值，遠離螢幕是負值）
景深：物體和眼睛的距離越小，近大遠小的效果就越明顯。
第一種用法(推薦)：perspective(引數)用在父元素
第二種用法： transform:perspective(引數px)用在子元素中使用 兩種方法不能一起使用不然會發生衝突，通常值在900px-1200px之間。
perspective-origin ：觀察3d的角度（位置）
perspective-origin:center center;(父元素中心)
perspective-origin:right top;(右上角) perspective-origin:100% 100%;(右下角)
transform-style屬性 該屬性是3d空間的重要屬性，讓元素在乙個3d空間裡面變化，有兩個屬性值：1.flat 為預設值，在乙個2d空間展示 2.preserve-3d 表示元素在3d空間裡面展示。所有3d空間定義在父元素裡面形成：transform-style:preserve-3d;
3d-位移 transform:translate3d(x,y,z) x:橫向座標的位移 y:縱向座標的位移 z:z軸向量的位移
3d-旋轉 rotate3d(x,y,z,a) rotatex(引數deg) 圍繞x軸進行旋轉 rotate(引數deg) 圍繞y軸進行旋轉 rotate(引數deg) 圍繞z軸進行旋轉
rotate3d(x,y,z,a) x：是乙個0到１之間的數值，元素圍繞x軸旋轉的向量值 y：是乙個0到１之間的數值，元素圍繞y軸旋轉的向量值 z:是乙個0到１之間的數值，元素圍繞z軸旋轉的向量值 a:是乙個角度值，圍繞3d空間旋轉的角度，正值為順時針轉動，負值為逆時針轉動。
3d-縮放 scalez()和scale3d()兩種函式 1.scalez() 每個元素在z軸的縮放比例 2.scale3d(x,y,z) x:x軸縮放比例 y:y軸縮放比例 z:z軸縮放比例
變形原點：也就是元素圍繞該點進行運動
transform-origin:(x,y) x:水平方向 y:垂直方向
數值（left,center）靠左邊的中心位置
（10px.10px）距離左邊10畫素，距離上邊10畫素
css3的2D和3D效果
2d效果 1.css3過渡，讓動畫更柔和，transition ie10 firefox chrome opera支援，chrome25以及更早版本safari需要新增 webkit transition width 0.5s ease 1s delay transition all 0.5s 常用...
CSS3新增2D和3D屬性
3d變形 css3 transform translatex x transform是css3中具有顛覆性的特徵之一，可以實現元素的位移 旋轉 傾斜 縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠flash才可以實現的效果。變形轉換 transform transfor...
2D縮放和3D位移
2d 平面空間的元素變形。變形屬性 transform transform的屬性值為功能函式。2d功能函式 2d的位移 2d的旋 2d的縮放 2d的傾斜 transform translate x,y 位移 transform translatex x軸移動的距離 transform transla...