CSS實(shí)現(xiàn)五種常用的2D轉(zhuǎn)換
我要評(píng)論CSS 中的 2D 轉(zhuǎn)換允許我們?cè)诙S空間中執(zhí)行一些基本的變換操作，例如移動(dòng)、旋轉(zhuǎn)、縮放或扭曲等，變換后的元素與絕對(duì)定位的元素類似，不會(huì)影響周圍的元素，但可以和周圍的元素重疊，不同的是，轉(zhuǎn)換后的元素在頁面中任然會(huì)占用為轉(zhuǎn)換之前的空間。
借助 CSS 中的 transform 屬性以及下列轉(zhuǎn)換函數(shù)就可以實(shí)現(xiàn) 2D 轉(zhuǎn)換：
- matrix()：以一個(gè)包含六個(gè)值（a, b, c, d, e, f）的變換矩陣的形式指定一個(gè) 2D 變換，相當(dāng)于直接應(yīng)用一個(gè) [a,b,c,d,e,f] 的變換矩陣；
- translate()：將對(duì)象沿 X 軸和 Y 軸平移，該函數(shù)需要提供 1~2 個(gè)參數(shù)，第一個(gè)參數(shù)對(duì)應(yīng) X 軸，第二個(gè)參數(shù)對(duì)應(yīng) Y 軸，如果未提供第二個(gè)參數(shù)，則默認(rèn)值為 0；
- translatex()：將對(duì)象沿 X 軸（水平方向）的平移；
- translatey()：將對(duì)象沿 Y 軸（垂直方向）的平移；
- rotate()：旋轉(zhuǎn)指定對(duì)象，在函數(shù)的參數(shù)中可以指定旋轉(zhuǎn)的角度；
- scale()：將對(duì)象進(jìn)行縮放，該函數(shù)需要提供 1~2 個(gè)參數(shù)，第一個(gè)參數(shù)對(duì)應(yīng) X 軸，第二個(gè)參數(shù)對(duì)應(yīng) Y 軸，如果未提供第二個(gè)參數(shù)，則默認(rèn)取第一個(gè)參數(shù)的值；
- scalex()：將對(duì)象進(jìn)行縮放（改變?cè)氐膶挾龋?/li>
- scaley()：將對(duì)象進(jìn)行縮放（改變?cè)氐母叨龋?/li>
- skew()：將對(duì)象沿 X 軸和 Y 軸方向進(jìn)行傾斜扭曲，該函數(shù)需要提供 1~2 個(gè)參數(shù)，第一個(gè)參數(shù)對(duì)應(yīng) X 軸，第二個(gè)參數(shù)對(duì)應(yīng) Y 軸。如果未提供第二個(gè)參數(shù)，則默認(rèn)值為 0；
- skewx()：將對(duì)象沿 X 軸的（水平方向）扭曲；
- skewy()：將對(duì)象沿 Y 軸的（垂直方向）扭曲。
1. translate()
translate() 函數(shù)用來根據(jù)指定的參數(shù)將元素沿水平（X軸）或垂直（Y軸）方向移動(dòng)，函數(shù)的語法格式如下：
translate(tx, ty)
其中 tx 對(duì)應(yīng)元素在水平（X軸）方向的移動(dòng)距離，ty 對(duì)應(yīng)元素在垂直（Y軸）方向的移動(dòng)距離，參數(shù) ty 可以忽略（默認(rèn)為 0），兩個(gè)參數(shù)均可以為負(fù)值。
【示例】使用 translate() 函數(shù)來移動(dòng)指定的元素：
<!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é)果如下圖所示：
圖：translate() 函數(shù)演示
如果只是將元素水平移動(dòng)或者只是將元素垂直移動(dòng)，也可以使用 translateX()（將元素水平移動(dòng)）或 translateY()（將元素垂直移動(dòng)），translateX() 和 translateY() 函數(shù)均只需要提供一個(gè)參數(shù)即可，例如：
translateX(100px); /* 等同于 translate(100px, 0px); */ translateY(10px); /* 等同于 translate(0px, 10px); */
2. rotate()
rotate() 函數(shù)用來按照給定的角度來旋轉(zhuǎn)元素，函數(shù)的語法格式如下：
rotate(a)
其中參數(shù) a 表示元素要旋轉(zhuǎn)的角度，若 a 為正值則表示順時(shí)針旋轉(zhuǎn)，若 a 為負(fù)值則表示逆時(shí)針旋轉(zhuǎn)。
【示例】使用 rotate() 函數(shù)來旋轉(zhuǎ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é)果如下圖所示：
圖：rotate() 函數(shù)演示
3. scale()
scale() 函數(shù)用來縮放（放大或縮?。┲付ǖ脑?，函數(shù)的語法格式如下：
scale(sx, sy)
其中 sx 表示水平方向的縮放比例，sy 表示垂直方向的縮放比例。另外，參數(shù) sy 可以省略，它的默認(rèn)值等于 sx。
【示例】使用 scale() 函數(shù)縮放指定元素：
<!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é)果如下圖所示：
圖：scale() 函數(shù)演示
提示：當(dāng) scale() 中，給定的參數(shù)值在 -1~1 范圍之外時(shí)，元素將被放大；當(dāng)在參數(shù)值在 -1~1 范圍之內(nèi)時(shí)，元素將被縮小。
與 translate() 函數(shù)類似，如果是僅在水平方向或者僅在垂直方向上縮放元素大小，也可以使用 scaleX()（在水平方向縮放元素）和 scaleY()（在垂直方向縮放元素）函數(shù)。scaleX() 和 scaleY() 函數(shù)僅需要提供一個(gè)參數(shù)即可，例如：
scaleX(0.5); /* 等同于 scale(0.5, 1); */ scaleY(0.5); /* 等同于 scale(1, 0.5); */
4. skew()
skew() 函數(shù)用來將元素沿水平方向（X軸）和垂直方向（Y軸）傾斜扭曲，函數(shù)的語法格式如下：
skew(ax, ay)
其中，參數(shù) ax 表示元素水平方向的扭曲角度，參數(shù) ay 表示元素垂直方向的扭曲角度。另外，參數(shù) ay 可以省略，若省略參數(shù) ay，則其默認(rèn)值為 0。
【示例】使用 skew() 函數(shù)來扭曲指定元素：
<!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é)果如下圖所示：
圖：skew() 函數(shù)演示
另外，如果是僅在水平方向或者僅在垂直方向上對(duì)元素進(jìn)行扭曲，也可以使用 skewX()（在水平方向縮放元素）和 skewY()（在垂直方向縮放元素）函數(shù)來完成。skewX() 和 skewY() 函數(shù)僅需要提供一個(gè)參數(shù)即可，例如：
skewX(15deg); /* 等同于 skew(15deg, 0deg); */ skewY(15deg); /* 等同于 skew(0deg, 15deg); */
5. matrix()
matrix() 函數(shù)可以看作是 skew()、scale()、rotate() 和 translate() 幾個(gè)函數(shù)的縮寫形式，通過 matrix() 函數(shù)可以同時(shí)定義所有 2D轉(zhuǎn)換操作，函數(shù)的語法格式如下：
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 為單位的水平和垂直值。
【示例】使用 matrix() 函數(shù)對(duì)元素進(jìn)行 2D轉(zhuǎn)換操作：
<!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() 函數(shù)演示
到此這篇關(guān)于CSS實(shí)現(xiàn)五種常用的2D轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)CSS 2D轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css3實(shí)現(xiàn)了對(duì)元素執(zhí)行2D平面變換，以及視覺上的3D空間變換，2D變換平時(shí)可能用的較多，3D效果也能錦上添花，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨2019-01-28css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解
眾所周知在css3中出現(xiàn)了許多新的特性，其中2D轉(zhuǎn)換我覺的非常有意思，通過它我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或者拉伸，所以希望在這里和大家分享一下。有需要的朋2016-12-23
