css3中2D轉(zhuǎn)換之有趣的transform形變效果
我要評論在CSS3中，transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的形變處理
語法：
div{
transform: none|transform-functions;
}
transform屬性可以指定為關(guān)鍵字值none或一個或多個<transform-function>值
注意：當(dāng)transform有多個屬性值時要用空格隔開
屬性值：
| 值 | 描述 |
|---|---|
| translate(x,y) | 定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉(zhuǎn)換，沿著 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉(zhuǎn)換，沿著 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉(zhuǎn)換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。 |
| rotateX() | 定義 3D 旋轉(zhuǎn)，沿 X 軸。 |
| rotateY() | 定義 3D 旋轉(zhuǎn)，沿 Y 軸。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。 |
下面對這些屬性值進行一一講解：
一、rotate（旋轉(zhuǎn)）
rotate(angle)通過指定的角度參數(shù)對原元素指定一個2D旋轉(zhuǎn)，angle代表旋轉(zhuǎn)角度：正值表示順時針旋轉(zhuǎn)、負值表示逆時針旋轉(zhuǎn)
單位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
轉(zhuǎn)換：弧度 = 角度*π/180
<div class="box"></div>
.box{
width: 200px;
height: 200px;
background-color: #B39DDB;
transition: .2s; /* 過渡屬性 */
}
.box:hover{
transform: rotate(30deg); /* 順時針旋轉(zhuǎn)30度 */
}
這里用了下css3中transition過渡屬性，不然在形變時會很生硬
效果如下：
而rotateX和rotateY是圍繞X軸和Y軸旋轉(zhuǎn)的，上面這個案例可以看做是圍繞Z軸旋轉(zhuǎn)，大家可以腦構(gòu)一下三維坐標(biāo)系，我們眼睛所看到屏幕的方向就可以當(dāng)做Z軸
rotateX圍繞X軸旋轉(zhuǎn)：
.box:hover{
transform: rotateX(45deg); /* x軸旋轉(zhuǎn)45度 */
}
rotateY圍繞Y軸旋轉(zhuǎn)：
.box:hover{
transform: rotateY(45deg); /* Y軸旋轉(zhuǎn)45度 */
}
二、translate（位移）
translate()這個CSS函數(shù)在水平和/或垂直方向上重新定位元素translate(x,y)對元素同時向X軸和Y軸移動，值為負數(shù)則反方向移動
translateX()元素在X軸移動
translateY()元素在Y軸移動
下面分別演示這三個功能效果：
.box:hover{
transform: translate(40px,80px); /* 向X軸移動+40px，向y軸移動+80px */
}
效果如下：
注意：如果translate()值傳遞一個值，則默認和translateX()效果一致
translateX()元素在X軸移動
.box:hover{
transform: translateX(50px); /* 向X軸移動+50px */
}
效果如下：
translateY()元素在Y軸移動
.box:hover{
transform: translateY(50px); /* 向Y軸移動+50px */
}
效果如下：
三、scale（縮放）
CSS 函數(shù)
scale()用于修改元素的大小?？梢酝ㄟ^向量形式定義的縮放值來放大或縮小元素，同時可以在不同的方向設(shè)置不同的縮放值
該變換通過一個二維向量確定在一個方向縮放的多少
- 當(dāng)坐標(biāo)值處于區(qū)間 [
-1, 1]之外時，該變換將在相應(yīng)的坐標(biāo)方向上放大該元素 - 當(dāng)處在區(qū)間之中時，該變換將在相應(yīng)的坐標(biāo)方向上縮小該元素
- 當(dāng)值為1時將不進行任何處理
- 當(dāng)為負數(shù)時，將進行像素點反射之后再進行大小的修改。
語法：
scale(sx) /* or */ scale(sx,sy)
sx表示縮放向量的橫坐標(biāo)
sy表示縮放向量的縱坐標(biāo)。如果未設(shè)置，則他的默認值被設(shè)置為sx。 從而使得元素在保持原有形狀下均等縮放
html
<div class="box">鼠標(biāo)移入放大/縮小</div>
css
.box{
width: 200px;
height: 200px;
background-color: #B39DDB;
transition: .2s; /* 過渡屬性 */
margin: 300px auto;
text-align:center;
line-height:200px;
}
.box:hover{
transform: scale(2);
/* 等同于 */
transform: scaleX(2) scaleY(2);
}
設(shè)置一個值就是均等縮放，效果如下：
設(shè)置兩個值就是在X和Y兩個維度縮放并移動縮放中心，例子如下：
.box:hover{
transform: scale(2,3);
}
如果設(shè)置的值在區(qū)間 [-1, 1]之間，該變換將在相應(yīng)的坐標(biāo)方向上縮小該元素：
.box:hover{
transform: scale(0.5);
}
值為1則為元素本身大小，不進行任何變換
如果值為負數(shù)，則反向鏡像放大：
.box:hover{
transform: scale(-1.5); /* 鏡像放大 */
}
scaleX()和scaleY()只是單獨在X軸和Y軸方向縮放元素，可以理解為scale()是它倆的復(fù)合屬性，如果只是單個方向縮放，直接使用對應(yīng)函數(shù)即可：
scaleX()只在X軸方向縮放：
.box:hover{
transform: scaleX(2); /* x方向放大兩倍 */
/* or */
transform: scale(2,1);
}
scaleY()只在Y軸方向縮放：
.box:hover{
transform: scaleY(2); /* Y方向放大兩倍 */
/* or */
transform: scale(1,2);
}
四、skew（傾斜）
skew()函數(shù)定義了一個元素在二維平面上的傾斜轉(zhuǎn)換單位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
轉(zhuǎn)換：弧度 = 角度*π/180
這種轉(zhuǎn)換是一種剪切映射(橫切)，它在水平和垂直方向上將單元內(nèi)的每個點扭曲一定的角度。每個點的坐標(biāo)根據(jù)指定的角度以及到原點的距離，進行成比例的值調(diào)整；因此，一個點離原點越遠，其增加的值就越大
語法：
skew(ax) /* or */ skew(ax, ay)
ax是一個<angle>，表示用于沿橫坐標(biāo)扭曲元素的角度
ay是一個<angle>，表示用于沿縱坐標(biāo)扭曲元素的角度。如果未定義，則其默認值為0，導(dǎo)致純水平傾斜。
html
<div class="box">傾斜元素</div>
css
.box{
width: 200px;
height: 200px;
background-color: #B39DDB;
transition: .2s; /* 過渡屬性 */
margin: 300px auto;
text-align:center;
line-height:200px;
}
.box:hover{
/* 純水平傾斜 */
transform: skew(25deg);
/* or */
transform: skew(25deg,0);
/* or */
transform: skewX(25deg);
}
效果如下：
注意：如果值為負數(shù)，則在相反方向傾斜，比如下面這個例子：
.box:hover{
/* 負值反方向傾斜 */
transform: skew(-25deg);
}
設(shè)置兩個值就是同時在X軸和Y軸上傾斜元素：
.box:hover{
/* 同時在X軸和Y軸上傾斜元素 */
transform: skew(20deg,10deg);
}
skewX()和skewY()只是單獨在X軸和Y軸方向傾斜元素，可以理解為skew()是它倆的復(fù)合屬性，如果只是單個方向傾斜，直接使用對應(yīng)函數(shù)即可：
skewX()只在X軸方向傾斜：
.box:hover{
/* 只在X軸上傾斜元素 */
transform: skewX(30deg);
}
skewY()只在Y軸方向傾斜：
.box:hover{
/* 只在Y軸上傾斜元素 */
transform: skewY(30deg);
}
五、transform-origin（基點）
transform-originCSS屬性讓你更改一個元素變形的原點
語法：
/* One-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px;
x-offset表示變形變形中心距離盒模型的左側(cè)偏移值
y-offset表示變形變形中心距離盒模型的頂部偏移值
offset-keyword表示定義相對應(yīng)的變形中心偏移
取值：
- 自定義（單位：cm、px、%）
- 關(guān)鍵詞：top、bottom、left、right、center（默認）
transform-origin屬性可以使用一個，兩個或三個值來指定，其中每個值都表示一個偏移量
栗子1：
html
<div class="box">不同基點形變</div>
css
.box{
width: 200px;
height: 200px;
background-color: #B39DDB;
transition: .2s; /* 過渡屬性 */
margin: 300px auto;
text-align:center;
line-height:200px;
/* 設(shè)置元素變形基點 */
transform-origin: 0 0; /* 左上角 */
/* 等同于 */
transform-origin: top left;
}
.box:hover{
transform: rotate(30deg); /* 旋轉(zhuǎn) */
}
效果如下：
栗子2：
.box{
width: 200px;
height: 200px;
background-color: #B39DDB;
transition: .2s; /* 過渡屬性 */
margin: 300px auto;
text-align:center;
line-height:200px;
/* 設(shè)置元素變形基點 */
transform-origin: 100% -30%;
}
.box:hover{
transform: scale(1.7); /* 旋轉(zhuǎn) */
}
效果如下：
栗子3：
.box{
width: 200px;
height: 200px;
background-color: #B39DDB;
transition: .2s; /* 過渡屬性 */
margin: 300px auto;
text-align:center;
line-height:200px;
/* 設(shè)置元素變形基點 */
transform-origin: bottom 100%;
}
.box:hover{
transform: skewX(50deg);
}
效果如下：
六、結(jié)束語
到這里css3中的2D形變分享到這里，另外需要大家注意的是：如果transform有多個屬性值時需要用空格隔開，并且屬性值書寫順序的不同得到的效果也是不同的?。?！
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #B39DDB;
transition: .2s; /* 過渡屬性 */
margin: 300px auto;
text-align:center;
line-height:200px;
}
.box:hover{
transform: translateX(200px) rotate(30deg) skew(20deg);
}
</style>
</head>
<body>
<div class="box">不同基點形變</div>
</body>
</html>
效果如下：
下面我們把transform的屬性值順序換一下看看效果：
.box:hover{
transform: rotate(30deg) translateX(100px) skew(20deg);
}
可以看出這兩個順序不同得到的效果也是不一樣的，各個屬性值之間必須用空格分開！
到此這篇關(guān)于css3中2D轉(zhuǎn)換之有趣的transform形變的文章就介紹到這了,更多相關(guān)css3有趣transform形變內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3的常見transformation圖形變化用法小結(jié)
這篇文章主要介紹了CSS3的常見transformation圖形變化用法小結(jié),共整理了旋轉(zhuǎn)、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下2016-05-13- 在CSS3中，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。本文就詳細的介紹了這4種實現(xiàn)，感興趣的可以了解一下2021-08-05
css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效
這篇文章主要介紹了css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可2021-04-29
css3利用transform變形結(jié)合事件完成扇形導(dǎo)航
這篇文章主要介紹了css3利用transform變形結(jié)合事件完成扇形導(dǎo)航,幫助大家更好的制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-26- 這篇文章主要介紹了css3 transform過渡抖動問題解決,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-23
這篇文章主要介紹了css3 利用transform打造走動的2D時鐘，幫助大家更好的利用cSS3制作特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-20
