CSS 中的2D 轉換允許我們在二維空間中執行一些基本的變換操作，例如移動、旋轉、縮放或扭曲等，變換後的元素與絕對定位的元素類似，不會影響周圍的元素，但可以和周圍的元素重疊，不同的是，轉換後的元素在頁面中任然會佔用為轉換之前的空間。
下面我們來介紹2D的轉換：
一、移動translate（）
根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動,可以改變元素在頁面中的位置，類似於定位。
1. 語法：
transform:translate(x,y);
或是分開寫也是可以的
transform:translateX(n);transform:translateY(n);
2. 重點：
（1）定義2D轉換中的移動，沿著看X,Y軸元素移動；
（2）translate最大的優點就是不會影響其他元素的位置；
（3）translate自身的百分比是相對於自身元素translate（50%，50%）;
（4）對行內標籤沒有效果；
舉例說明：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></body></html>運行結果：
二、旋轉rotate（）
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
語法：transfrom:rotate(旋轉的度數)
重點：
rotate(度數),單位是deg例如：rotate(45deg);
角度是正為順時針，是負為逆時針；
預設順時針的中心點為元素的中心點；
舉例說明：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <body><div></div></body></html>運行結果：
三、2D轉換中心點transform-origin:
文法:
transform-origin:xy;
重點：
（1）注意後面x,y用空格隔開；
（2）xy預設的中心點是元素的中心點(50% 50%);
（3）也可以為xy設定像素或方向名詞(right left center bottom top);
四、縮放scale()
scale()方法，此元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數：
（1）修改元素的大小，放大或縮小元素
（2）為負數會顛倒
（3）函數的語法格式如下：
scale(sx,sy)
其中sx 表示水平方向的縮放比例，sy 表示垂直方向的縮放比例。另外，參數sy 可以省略，它的預設值等於sx。
舉例說明：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>運行結果：
五、傾斜skew()
包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則預設為0，參數為負表示向相反方向傾斜。
（1）skewX(<angle>);表示只在X軸(水平方向)傾斜。
（2）skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
（3）讓元素在不同方向上傾斜。
（4）skew(a)等於skew(a,0)
（5）skew(x,y)
（6）單位角度deg
舉例說明：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /head><body><div></div></body></html>運行結果：
六、matrix()
matrix() 函數可以看作是skew()、scale()、rotate() 和translate() 幾個函數的縮寫形式，透過matrix() 函數可以同時定義所有2D轉換操作，函數的語法格式如下：
matrix(a,b,c,d,tx,ty)
matrix() 函數中的6 個參數分別對應scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY() 幾個函數，您可以使用matrix() 來實作各種2D轉換操作，例如：
translate(tx,ty)=matrix(1,0,0,1,tx,ty);：
其中tx 和ty 是水平和垂直平移值；
rotate(a)=matrix(cos(a),sin(a),-sin(a),cos(a),0,0);
其中，a 是度數的值。您可以交換sin(a) 和-sin(a) 值來進行反向旋轉；
scale(sx,sy)=matrix(sx,0,0,sy,0,0);
其中sx 和sy 是水平和垂直縮放比例值；
skew(ax,ay)=matrix(1,tan(ay),tan(ay),1,0,0);
其中ax 和ay 是以deg 為單位的水平和垂直值。
舉例說明：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;float:left;}.on e{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}.two{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}. three{mar gin-left:40px;margin-top:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.four{transform:matrix(0.586,0.8,-0.8,0.586,40,386,40,386,40,386,40,386,40,386,40,386,40,386,40,386,40,386,40,386,40,386,40,386 0);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></div ></body></html>運行結果：
matrix()方法和2D變換方法合併成一個。
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
用矩陣表達變換量matrix(a,b,c,d,x,y)
● acx
●bdy
●0 0 1
以下運用一個具體案例來實踐：
程式碼如下：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1 .0><title>Document</title><style>body{margin:100px;}.transformElement{width:200px;height:200px;background-color:red;transition:all1slinear;float:left;po sition:relative;left:0;color:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px;background-color:blue;transition:all1slinear ;float:left;}.transformElement:hover{/*transform:translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5) */transform:skew(-45d eg,45deg);}.clock{width:400px;height:400px;border-radius:50%;background-color:#Faa;position:relative;}.stick{width:4px;height:200px;background-color :blu e;position:absolute;left:198px;top:0;transition:all12slinear;transform-origin:centerbottom;}.stickshort{width:8px;height:100px;background-color:rgb(142, 21,248);position:absolute;left:196px;top:100px;transition:all12slinear;transform-origin:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320 deg);}.clock:hover.stickshort{transform:rotate(360deg);}</style></head><body><!--<div></div><div></div>-- ><div><div></div><div></div></div></body></html>運行結果：
