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