CSS 中的 2D 轉(zhuǎn)換允許我們?cè)诙S空間中執(zhí)行一些基本的變換操作，例如移動(dòng)、旋轉(zhuǎn)、縮放或扭曲等，變換后的元素與絕對(duì)定位的元素類似，不會(huì)影響周圍的元素，但可以和周圍的元素重疊，不同的是，轉(zhuǎn)換后的元素在頁(yè)面中任然會(huì)占用為轉(zhuǎn)換之前的空間。
下面我們來介紹2D的轉(zhuǎn)換：
一、移動(dòng)translate（）
根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng),可以改變?cè)卦陧?yè)面中的位置，類似于定位。
1. 語(yǔ)法：
transform:translate(x,y);
或者分開寫也是可以的
transform:translateX(n); transform:translateY(n);
2. 重點(diǎn)：
（1）定義2D轉(zhuǎn)換中的移動(dòng)，沿看X,Y軸元素移動(dòng)；
（2）translate最大的優(yōu)點(diǎn)就是不會(huì)影響其他元素的位置；
（3）translate自身的百分比是相對(duì)于自身元素translate（50%，50%）;
（4）對(duì)行內(nèi)標(biāo)簽沒有效果；
舉例說明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
transform: translate(100px, 10px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>運(yùn)行結(jié)果：
二、旋轉(zhuǎn)rotate（）
rotate()方法，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。
語(yǔ)法：transfrom:rotate(旋轉(zhuǎn)的度數(shù))
重點(diǎn)：
rotate(度數(shù)),單位是deg例如：rotate(45deg);
角度是正為順時(shí)針，是負(fù)為逆時(shí)針；
默認(rèn)順時(shí)針的中心點(diǎn)為元素的中心點(diǎn)；
舉例說明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 20px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>運(yùn)行結(jié)果：
三、2D轉(zhuǎn)換中心點(diǎn)transform-origin:
語(yǔ)法：
transform-origin:x y;
重點(diǎn)：
（1）注意后面x,y用空格隔開；
（2）x y默認(rèn)的中心點(diǎn)是元素的中心點(diǎn)(50% 50%);
（3）還可以給x y設(shè)定像素或者方向名詞(right left center bottom top);
四、縮放 scale()
scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：
（1）修改元素的大小，放大或者縮小元素
（2）為負(fù)數(shù)會(huì)顛倒
（3）函數(shù)的語(yǔ)法格式如下：
scale(sx, sy)
其中 sx 表示水平方向的縮放比例，sy 表示垂直方向的縮放比例。另外，參數(shù) sy 可以省略，它的默認(rèn)值等于 sx。
舉例說明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
transform: scale(0.7);
}
</style>
</head>
<body>
<div></div>
</body>
</html>運(yùn)行結(jié)果：
五、傾斜 skew()
包含兩個(gè)參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
（1）skewX(<angle>);表示只在X軸(水平方向)傾斜。
（2）skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
（3）讓元素在不同方向上傾斜。
（4）skew(a)等于skew(a,0)
（5）skew(x,y)
（6）單位角度deg
舉例說明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 10px;
transform: skew(-15deg, 20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>運(yùn)行結(jié)果：
六、matrix()
matrix() 函數(shù)可以看作是 skew()、scale()、rotate() 和 translate() 幾個(gè)函數(shù)的縮寫形式，通過 matrix() 函數(shù)可以同時(shí)定義所有 2D轉(zhuǎn)換操作，函數(shù)的語(yǔ)法格式如下：
matrix(a, b, c, d, tx, ty)
matrix() 函數(shù)中的 6 個(gè)參數(shù)分別對(duì)應(yīng) scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY() 幾個(gè)函數(shù)，您可以使用 matrix() 來實(shí)現(xiàn)各種 2D轉(zhuǎn)換操作，例如：
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 是度數(shù)的值。您可以交換 sin(a) 和 -sin(a) 值來進(jìn)行反向旋轉(zhuǎn)；
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 為單位的水平和垂直值。
舉例說明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 10px;
float: left;
}
.one {
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 {
margin-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, 30);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>運(yùn)行結(jié)果：
matrix()方法和2D變換方法合并成一個(gè)。
matrix 方法有六個(gè)參數(shù)，包含旋轉(zhuǎn)，縮放，移動(dòng)（平移）和傾斜功能。
用矩陣表達(dá)變換量 matrix(a,b,c,d,x,y)
● a c x
● b d y
● 0 0 1
下面運(yùn)用一個(gè)具體案例來實(shí)踐一下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 100px;
}
.transformElement{
width:200px;
height:200px;
background-color: red;
transition:all 1s linear;
float: left;
position: relative;
left: 0;
color: #FFF;
/* transform-origin: left top; */
}
.transformElement2{
width:200px;
height:200px;
background-color: blue;
transition:all 1s linear;
float: left;
}
.transformElement:hover{
/* transform: translate(200px,0) rotate(360deg) scale(2); */
/* left: 100px; */
/* transform: scale(2,0.5) */
transform: skew(-45deg,45deg);
}
.clock{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #Faa;
position: relative;
}
.stick{
width: 4px;
height: 200px;
background-color: blue;
position: absolute;
left: 198px;
top: 0;
transition: all 12s linear;
transform-origin: center bottom;
}
.stickshort{
width: 8px;
height: 100px;
background-color: rgb(142, 21, 248);
position: absolute;
left: 196px;
top: 100px;
transition: all 12s linear;
transform-origin: center bottom;
z-index: 2;
}
.clock:hover .stick{
transform: rotate(4320deg);
}
.clock:hover .stickshort{
transform: rotate(360deg);
}
</style>
</head>
<body>
<!-- <div></div>
<div></div> -->
<div>
<div></div>
<div></div>
</div>
</body>
</html>運(yùn)行結(jié)果：
C語(yǔ)言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫的：零基礎(chǔ)C語(yǔ)言學(xué)練課程
解決困擾你多年的C語(yǔ)言疑難雜癥特性的C語(yǔ)言進(jìn)階課程
從零到寫出一個(gè)爬蟲的Python編程課程
只會(huì)語(yǔ)法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程