轉(zhuǎn)換是CSS3中具有顛覆性的特征之一忿等，可以實(shí)現(xiàn)元素的位移栖忠、旋轉(zhuǎn)、變形贸街、縮放庵寞，甚至支持矩陣方式，配合過渡和即將學(xué)習(xí)的動(dòng)畫知識(shí)薛匪，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果捐川。
變形轉(zhuǎn)換 transform :
移動(dòng) translate(x, y) translate(50px,50px);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
/*transform: translate(x, y);x y 可以是負(fù)值*/
/*變形： 移動(dòng)*/
transition: all 0.5s;/*當(dāng)點(diǎn)擊鼠標(biāo)時(shí)，慢慢的移動(dòng)逸尖，松開鼠標(biāo)之后古沥，慢慢的回去*/
}
div:active { /* a:active鼠標(biāo)點(diǎn)擊沒有松開的時(shí)候 觸發(fā)的狀態(tài)*/
transform: translate(50px, 50px);/*當(dāng)點(diǎn)擊之后，移動(dòng)位置*/
/*transform: translate(50px);只移動(dòng)x軸的情況這樣寫*/
/*transform: translate(0,50px);只移動(dòng)y軸這樣寫*/
/*transform: translateX(50px);也可以這樣寫娇跟，而且一般這樣寫*/
/*transform: translateY(50px);也可以這樣寫*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
原本盒子在左上角：
image.png
當(dāng)鼠標(biāo)點(diǎn)擊沒有松開時(shí)岩齿，向右移動(dòng)50，向下移動(dòng)50：
image.png
案例：盒子水平垂直居中對(duì)齊的新寫法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
/*transform: translate(100px);水平移動(dòng)100*/
/*transform: translate(50%);這樣寫的話苞俘，移動(dòng)的50%寬度是以他自身的寬度一半為準(zhǔn)的盹沈，也就是div的一半，200px/2=100px吃谣，而不是以父級(jí)或?yàn)g覽器的寬度的一半為準(zhǔn)*/
/*以前我們定位的盒子居中對(duì)齊是先移動(dòng)父級(jí)的一半寬度乞封，再往回走自己寬度的一半，才能實(shí)現(xiàn)居中*/
/*以前的居中是這樣寫的*/
position: absolute;
left: 50%; /* !*以父級(jí)寬度為準(zhǔn)*!*/
top: 50%;
/*margin-left: -100px;以前的居中是這樣寫的基协， 但是這樣寫的話就被寫死了歌亲，父級(jí)寬度如果改動(dòng)的話，這里也要改澜驮，他不會(huì)自動(dòng)變*/
transform: translate(-50%, -50%); /*現(xiàn)在不需要再計(jì)算一半距離是多少陷揪，直接用50%就可以了*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
image.png
縮放scale（x， y）
transform:scale(0.8, 1);這里如果括號(hào)里只寫一個(gè)數(shù)的話，就不像translate(x, y)一樣是默認(rèn)為x值了悍缠，scale（）括號(hào)里如果只有一個(gè)值的話卦绣，是x y一起共同都是這個(gè)值
scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）
scale()的取值默認(rèn)的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值飞蚓，作用使一個(gè)元素縮新烁邸；而任何大于或等于1.01的值趴拧，作用是讓元素放大
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 100px auto;
transition: all 0.5s;/* 漸變 x y 軸都變 */
}
div:hover {
transform: scale(1.2, 1.5); /* x 水平縮放 y垂直縮放 鼠標(biāo)經(jīng)過后放大溅漾，離開后復(fù)原，如果只有一個(gè)參數(shù)的話著榴，寬度添履、高度都縮放，可以做一些網(wǎng)站的鼠標(biāo)經(jīng)過后圖片放大的效果*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
image.png
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
section {
width: 632px;
height: 340px;
margin: 100px auto;
border: 5px solid lightcoral;
overflow: hidden;/*溢出隱藏脑又，變大的圖片超出邊框隱藏*/
}
section img {
transition: all 0.2s;/*因?yàn)閳D片縮放了暮胧，是圖片做動(dòng)畫，所以過渡要加給img问麸，誰做動(dòng)畫往衷，誰加過渡，與section沒有關(guān)系*/
}
section:hover img {/*鼠標(biāo)經(jīng)過section之后严卖，他里面的img做以下動(dòng)作*/
transform: scale(1.2);/*鼠標(biāo)經(jīng)過section后席舍，它里面的img放大1.2倍*/
}
</style>
</head>
<body>
<section>
<img src="images/mi.jpg" alt="">
</section>
</body>
</html>
鼠標(biāo)經(jīng)過圖片后，圖片放大妄田，超出邊框的部分隱藏：
![]()
image.png
image.png
旋轉(zhuǎn) rotate(deg)
可以對(duì)元素進(jìn)行旋轉(zhuǎn)俺亮，正值為順時(shí)針，負(fù)值為逆時(shí)針疟呐；
<style>
img {
margin: 100px;
transition: all 0.5s;
}
img:hover {
transform: rotate(90deg);/*這里給 -90deg的話脚曾，就是逆時(shí)針旋轉(zhuǎn)*/
}
</style>
</head>
<body>
<section>
<img src="images/chu.jpg" alt="">
</section>
</body>
鼠標(biāo)經(jīng)過后，圖片旋轉(zhuǎn)90度启具，并且是在0.5s的時(shí)間內(nèi)勻速旋轉(zhuǎn)
image.png
上面例子拓展：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
margin: 100px;
transition: all 0.8s;/*過渡 所有條件都過渡*/
border-radius: 50%; /*給圖片圓角*/
border: 5px solid cadetblue;
}
img:hover {
transform: rotate(360deg);/*旋轉(zhuǎn)的度數(shù)寫多少都可以本讥，720都行*/
}
</style>
</head>
<body>
<section>
<img src="images/chu.jpg" alt="">
</section>
</body>
</html>
拓展練習(xí)： 圖片變成圓角，加邊框鲁冯，并且順時(shí)針旋轉(zhuǎn)360度拷沸。
image.png
transform-origin 可以調(diào)整元素轉(zhuǎn)換變形的原點(diǎn)，上面的圖片旋轉(zhuǎn)是圍繞中心點(diǎn)旋轉(zhuǎn)的薯演，也可以設(shè)置為圍繞其他點(diǎn)旋轉(zhuǎn)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 200px;
margin: 100px;
transition: all 0.6s;
transform-origin: top left;/* origin：原點(diǎn)撞芍。transform-origin這個(gè)屬性默認(rèn)值是center center 圍繞中心點(diǎn)旋轉(zhuǎn)，修改成top left之后跨扮，他就會(huì)圍繞左上角旋轉(zhuǎn) 如果要精確一些的話序无，可以寫成像素的：transform-origin: 20px 30px;*/
}
img:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="images/pk1.png" alt="">
</body>
</html>
image.png
旋轉(zhuǎn)案例：
沿中心點(diǎn)旋轉(zhuǎn)效果
以上代碼不加transform-origin: top right;（圖片沿右上角旋轉(zhuǎn)）的效果
image.png
代碼效果：沿右上角旋轉(zhuǎn)
加了transform-origin: top right;的效果
image.png
傾斜 skew（deg, deg）
通過skew方法把元素水平方向上傾斜30度验毡，處置方向保持不變。
可以使元素按一定的角度進(jìn)行傾斜帝嗡，可為負(fù)值晶通，第二個(gè)參數(shù)不寫默認(rèn)為0。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
font-size: 50px;
font-weight: 700;
margin: 100px;
transition: all 0.7s;
}
div:hover {
/*transform: skew(-30deg,0);*/
transform: skew(0, -10deg);/*y軸這個(gè)值如果大了哟玷，他會(huì)跑掉狮辽，離開鼠標(biāo)能點(diǎn)到的地方又會(huì)跑回來*/
}
</style>
</head>
<body>
<div>
楚喬
</div>
</body>
</html>
image.png
