標籤：transform
轉換 transform
能夠對元素進行移動、縮放、轉動、拉長或展開
在CSS中，允許元素實現 2D 和 3D的轉換效果,主要包含 ：旋轉，縮放，移動，傾斜
2D ：元素只能在X軸和Y軸平面上發生變化
3D ：元素還可以在 Z軸上發生變化
取值：
none：無轉換
2D Transform Functions：
matrix()：
以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a,b,c,d,e,f]變換矩陣
translate()：
指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0
translatex()：
指定對象X軸（水平方向）的平移
translatey()：
指定對象Y軸（垂直方向）的平移
rotate()：
指定對象的2D rotation（2D旋轉），需先有 <‘ transform-origin ‘> 屬性的定義
scale()：
指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設取第一個參數的值
scalex()：
指定對象X軸的（水平方向）縮放
scaley()：
指定對象Y軸的（垂直方向）縮放
skew()：
指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0
skewx()：
指定對象X軸的（水平方向）扭曲
skewy()：
指定對象Y軸的（垂直方向）扭曲
3D Transform Functions：
matrix3d()：
以一個4x4矩陣的形式指定一個3D變換
translate3d()：
指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
translatez()：
指定對象Z軸的平移
rotate3d()：
指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略
rotatex()：
指定對象在x軸上的旋轉角度
rotatey()：
指定對象在y軸上的旋轉角度
rotatez()：
指定對象在z軸上的旋轉角度
scale3d()：
指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
scalez()：
指定對象的z軸縮放
perspective()：
指定透視距離
1、2D轉換
使元素在x軸 和 y軸上所進行的轉換效果可以稱之為2D轉換，包括：位移、縮放、旋轉、傾斜
1-1、位移 translate()
讓元素產生一個位置的移動變化效果
函數：translate(一個值) -->只在x軸位移距離
translate(值1，值2) --> 在x軸和y軸的位移距離
取值：數值 | 百分比，可以取負值
x為正，則向右移動； x為負，則向左移動。
y為正，則向下移動； y為負，則向上移動。
程式碼範例如下：
<!doctype html><html> <head> <meta charset="UTF-8"> <title>位移</title> <style> div{ width:100px; height:100px; /*絕對位置*/ position:absolute; top:0; left:0; } #d1{ border:1px dotted #333; } #d2{ border:1px solid #f00; background-color:#ddd; opacity:0.5; /*位移*/ transform:translate(50px,50px); } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body></html>
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/8A/9C/wKioL1g1X2CRhOCeAAAE3Bu7CuI980.png" title="QQ20161123172015.png" alt="wKioL1g1X2CRhOCeAAAE3Bu7CuI980.png" />
1-2、縮放 scale()
改變元素的大小稱之為 縮放
函數：scale(), scale(x), scale(x,y)
注意：如果只給一個值，那麼，第二個預設與第一個值相等
取值：預設值為1
縮小：0到1之間的數值
放大：大於1的數值
程式碼範例如下：
<!doctype html><html> <head> <meta charset="UTF-8"> <title>位移</title> <style> div{ width:200px; height:200px; /*絕對位置*/ position:absolute; top:300px; left:400px; } #d1{ border:1px dotted #333; } #d2{ border:1px solid #f00; background-color:#ddd; opacity:0.5; /*縮放*/ transform:scaleX(1.5); } </style> </head> <body> <div id="d1">原始元素</div> <div id="d2">縮放元素</div> </body></html>
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/8A/9C/wKioL1g1YkiA_IELAAAPatS2CTE470.png" title="QQ20161123173238.png" alt="wKioL1g1YkiA_IELAAAPatS2CTE470.png" />
轉換的原點 transform-origin
預設位置：原點是在元素的中心位置
取值：數值 | 百分比 | 關鍵字
兩個值：表示x軸 和 y軸的位置
三個值：表示x軸，y軸，z軸
相容性：
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M02/8A/9F/wKiom1g1WwTwFOVuAABAfqDgTYI449.png" title="QQ20161123170126.png" alt="wKiom1g1WwTwFOVuAABAfqDgTYI449.png" />
本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1875900
CSS3 轉換(Transform)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
