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