css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。
transform指定應用的變換功能
transform-origin指定變換的起點
transform的屬性值:
none無變換
translate(長度值或百分數值) 兩個方向平移元素
translatex(長度值或百分數值) 水平方向平移元素
translatey(長度值或百分數值)垂直方向平移元素。
scale(數值)兩個方向上縮放元素
scalex(數值)水平方向上縮放元素
scaley(數值)垂直方向上縮放元素
rotate(角度)旋轉元素
skew(角度) 兩個方向上使元素傾斜一定的角度
skewx(角度) 水平方向上使元素傾斜一定的角度
skewy(角度)垂直方向上使元素傾斜一定的角度
matrix(4~6數值，逗號隔開)指定自定義變換。
//向水平和垂直各移動200畫素，也可以使用百分比
transform:translate(200px,200px);
//向水平平移200畫素，不加後面的0也可以
transform:translate(200px,0);
transform:translatex(200px);
//向垂直平移200畫素
transform:translate(0,200px);
transform:translatey(200px);
//水平、垂直方向放大1.5倍
transform:scale(1.5);
transform:scale(1.5,1.5);
//水平、垂直方向縮小0.8倍
transform:scale(0.8,0.8);
//水平方向放大1.5倍
transform:scalex(1.5);
//垂直方向放大1.5倍
transform:scaley(1.5);
//旋轉元素，0~360度之間，負值均可
//傾斜元素，0~360度之間，負值均可
transform:skew(45deg,20deg);
//水平傾斜元素，0~360度之間，負值均可
transform:skewx(45deg);
//垂直傾斜元素，0~360度之間，負值均可
transform:skewy(45deg);
transform:matrix(1,0,0,1,30,30);
//不同的值可以累計，通過空格分割
transform:rotate(-45deg) scale(1.5);
transform-origin屬性可以設定變換的起點。預設情況下，使用元素的中心作為起點。具體設定方案參考如下表：
百分數值指定元素x軸或y軸的起點
長度值指定距離
left center right指定x軸的位置
top center bottom指定y軸的位置
這個屬性是用來改變變形的基準點的，預設是在元素的中心位置，如果你改變了基準點。它就會按照這個基準點進行變形。
//預設值，以中心點變形
transform-origin:center center;
transform-origin:50% 50%;
//以左上角為基準點變形
transform-origin:left top;
transform-origin:0px 0px;
//相容完整版
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
-o-transform-origin:left top;
-ms-transform-origin:left top;
transform-origin:left top
由於3d是立體三維，在x、y軸的基礎上一般會多出乙個z軸，深入躍出軸。
translate3d(x,y,z)3d方式平移元素，設定x、y和z軸
translatez(z)設定3d方式平移元素的z軸
scale3d(x,y,z)3d方式縮放乙個元素
scalez(z)設定3d方式縮放元素的z軸
rotate3d(x,y,z,a)3d方式旋轉元素
rotatex(a) rotatey(a) rotatez(a)分別設定3d方式的旋轉元素的x、y和z軸
perspective(長度值)設定乙個透視投影矩陣
matrix3d(多個值)定義乙個矩陣
//相容版本完整形式
-webkit-transform:translatez(200px);
-moz-transform:translatez(200px);
-o-transform:translatez(200px);
-ms-transform:translatez(200px);
transform:translatez(200px);
transform-style屬性是指定巢狀元素如何在3d空間中呈現。
flat預設值，表示所有子元素在2d平面呈現。
preserve-3d表示子元素在3d空間中呈現。
//一般設定到當前元素的父元素
transform-style:preserve-3d;
需要再配合後面的功能屬性和變形配置，才能看到效果。同樣，這個屬性也需要加上各種廠商字首。
perspective是3d變形的重要屬性，該屬性會設定檢視者的位置，並將可視內容對映到乙個視錐上，繼而投放到乙個2d平面上。
none預設值，表示無限的角度來看3d物體，但看上去是平的。
長度值接受乙個長度單位大於0的值，其單位不能為百分比。值越大，角度出現的越遠，就好比你人離遠一點看物體。值越小，正相反。
//設定檢視者的距離位置，一般設定在元素的父元素上
perspective:1000px;
需要再配合後面的功能屬性和變形配置，才能看到效果。同樣，這個屬性也需要加上各種廠商字首
我們運用前面3d功能屬性transform-style和perspective來構建3d變形效果。
//需要3d位移的html結構，必須有父元素包含
//css部分，父元素設定3d呈現且設定透視距離
#aimg
//可以單獨設定z軸，z軸可以是負值
imgscale3d(x,y,z)
//3d縮放，單獨設定無效，需要配合角度
//單獨設定z軸，x和y軸預設為1
imgrotate3d(x,y,z,a)
//設定3d旋轉，a表示角度，xyz是0或1之間的數值
transform:rotate3d(1,0,0,45deg);
rotatex(a)、rotatey(a)、rotatez(a)
//單獨設定3d旋轉
transform:rotatex(45deg);
transform:rotatey(45deg);
transform:rotatez(45deg);
transform:rotatex(45deg) rotatey(45deg) rotatez(45deg);
CSS3 變形與動畫效果
1.旋轉rotate 函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定乙個角度值，用來指定旋轉的幅度。如果這個值為正值，則元素相對原點中心順時針旋轉 如果這個值為負值，元素相對原點中心逆時針旋轉。transform rotate 20deg 2.扭曲skew 函式能夠讓...
css3變形講解
transform變形 可以實現文字或者旋轉 縮放 傾斜和移動，並且該元素下的所有子元素都隨著父元素一樣。既然接觸到transform，我們就可以做好多3d的效果啦 旋 transform rotate 角度deg deg是css3的 values and units 模組中定義的乙個角度單位 縮放...
CSS3筆記 3 過渡效果 動畫 變形
語法 transition duration time 語法 transition property none all property 語法 transition delay time 語法 transition timing function linear ease ease in ease o...