css3中2D轉換之有趣的transform形變效果

  發布時間:2022-02-18 16:33:35   作者:不知名前端李小白   我要評論
在CSS3中,transform屬性應用于元素的2D或3D轉換,可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的形變處理,本文給大家介紹css3中2D轉換之有趣的transform形變效果,感興趣的朋友一起看看吧

在CSS3中,transform屬性應用于元素的2D或3D轉換,可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的形變處理

語法:

div{
    transform: none|transform-functions;
}

transform屬性可以指定為關鍵字值none或一個或多個<transform-function>

注意:當transform有多個屬性值時要用空格隔開

屬性值:

描述
translate(x,y) 定義 2D 轉換,沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換,沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換,沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換,改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換,改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換,改變元素的高度。
rotate(angle) 定義 2D 旋轉,在參數中規定角度。
rotateX() 定義 3D 旋轉,沿 X 軸。
rotateY() 定義 3D 旋轉,沿 Y 軸。
skew(x-angle,y-angle) 定義 2D 傾斜轉換,沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換,沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換,沿著 Y 軸。

下面對這些屬性值進行一一講解:

一、rotate(旋轉)

rotate(angle)通過指定的角度參數對原元素指定一個2D旋轉,angle代表旋轉角度:正值表示順時針旋轉、負值表示逆時針旋轉

單位:deg(角度)、rad(弧度)、grad(梯度)、turn(圈)

轉換:弧度 = 角度*π/180

<div class="box"></div>
.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 過渡屬性 */
}
.box:hover{
    transform: rotate(30deg); /* 順時針旋轉30度 */
}

這里用了下css3中transition過渡屬性,不然在形變時會很生硬

效果如下:

rotateXrotateY是圍繞X軸和Y軸旋轉的,上面這個案例可以看做是圍繞Z軸旋轉,大家可以腦構一下三維坐標系,我們眼睛所看到屏幕的方向就可以當做Z軸

rotateX圍繞X軸旋轉:

.box:hover{
    transform: rotateX(45deg); /* x軸旋轉45度 */
}

rotateY圍繞Y軸旋轉:

.box:hover{
    transform: rotateY(45deg); /* Y軸旋轉45度 */
}

二、translate(位移)

translate()這個CSS函數在水平和/或垂直方向上重新定位元素

translate(x,y)對元素同時向X軸和Y軸移動,值為負數則反方向移動

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 函數scale()用于修改元素的大小??梢酝ㄟ^向量形式定義的縮放值來放大或縮小元素,同時可以在不同的方向設置不同的縮放值

該變換通過一個二維向量確定在一個方向縮放的多少

  • 當坐標值處于區間 [-1, 1]之外時,該變換將在相應的坐標方向上放大該元素
  • 當處在區間之中時,該變換將在相應的坐標方向上縮小該元素
  • 當值為1時將不進行任何處理
  • 當為負數時,將進行像素點反射之后再進行大小的修改。

語法:

scale(sx)
/* or */
scale(sx,sy)

sx表示縮放向量的橫坐標

sy表示縮放向量的縱坐標。如果未設置,則他的默認值被設置為sx。 從而使得元素在保持原有形狀下均等縮放

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: scale(2);
    /* 等同于 */
    transform: scaleX(2) scaleY(2);
}

設置一個值就是均等縮放,效果如下:

設置兩個值就是在X和Y兩個維度縮放并移動縮放中心,例子如下:

.box:hover{
    transform: scale(2,3);
}

如果設置的值在區間 [-1, 1]之間,該變換將在相應的坐標方向上縮小該元素:

.box:hover{
    transform: scale(0.5);
}

值為1則為元素本身大小,不進行任何變換

如果值為負數,則反向鏡像放大:

.box:hover{
    transform: scale(-1.5); /* 鏡像放大 */
}

scaleX()scaleY()只是單獨在X軸和Y軸方向縮放元素,可以理解為scale()是它倆的復合屬性,如果只是單個方向縮放,直接使用對應函數即可:

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()函數定義了一個元素在二維平面上的傾斜轉換

單位:deg(角度)、rad(弧度)、grad(梯度)、turn(圈)

轉換:弧度 = 角度*π/180

這種轉換是一種剪切映射(橫切),它在水平和垂直方向上將單元內的每個點扭曲一定的角度。每個點的坐標根據指定的角度以及到原點的距離,進行成比例的值調整;因此,一個點離原點越遠,其增加的值就越大

語法:

skew(ax)
/* or */
skew(ax, ay)

ax是一個<angle>,表示用于沿橫坐標扭曲元素的角度

ay是一個<angle>,表示用于沿縱坐標扭曲元素的角度。如果未定義,則其默認值為0,導致純水平傾斜。

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);
}

效果如下:

注意:如果值為負數,則在相反方向傾斜,比如下面這個例子:

.box:hover{
    /* 負值反方向傾斜 */
    transform: skew(-25deg);
}

設置兩個值就是同時在X軸和Y軸上傾斜元素:

.box:hover{
    /* 同時在X軸和Y軸上傾斜元素 */
    transform: skew(20deg,10deg);
}

skewX()skewY()只是單獨在X軸和Y軸方向傾斜元素,可以理解為skew()是它倆的復合屬性,如果只是單個方向傾斜,直接使用對應函數即可:

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表示變形變形中心距離盒模型的左側偏移值

y-offset表示變形變形中心距離盒模型的頂部偏移值

offset-keyword表示定義相對應的變形中心偏移

取值:

  • 自定義(單位:cm、px、%)
  • 關鍵詞: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;
    /* 設置元素變形基點 */
    transform-origin: 0 0; /* 左上角 */
    /* 等同于 */
    transform-origin: top left;
}
.box:hover{
    transform:  rotate(30deg); /* 旋轉 */
}

效果如下:

栗子2:

.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 過渡屬性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
    /* 設置元素變形基點 */
    transform-origin: 100% -30%;
}
.box:hover{
    transform: scale(1.7); /* 旋轉 */
}

效果如下:

栗子3:

.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 過渡屬性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
    /* 設置元素變形基點 */
    transform-origin: bottom 100%;
}
.box:hover{
    transform: skewX(50deg);
}

效果如下:

六、結束語

到這里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);
}

可以看出這兩個順序不同得到的效果也是不一樣的,各個屬性值之間必須用空格分開!

到此這篇關于css3中2D轉換之有趣的transform形變的文章就介紹到這了,更多相關css3有趣transform形變內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • CSS3的常見transformation圖形變化用法小結

    這篇文章主要介紹了CSS3的常見transformation圖形變化用法小結,共整理了旋轉、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下
    2016-05-13
  • css3中transform屬性實現的4種功能

    在CSS3中,可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的變形處理。本文就詳細的介紹了這4種實現,感興趣的可以了解一下
    2021-08-05
  • css3 利用transform-origin 實現圓點分布在大圓上布局及旋轉特效

    這篇文章主要介紹了css3 利用transform-origin 實現圓點分布在大圓上布局及旋轉特效,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可
    2021-04-29
  • css3利用transform變形結合事件完成扇形導航

    這篇文章主要介紹了css3利用transform變形結合事件完成扇形導航,幫助大家更好的制作CSS3特效,美化自身網頁,感興趣的朋友可以了解下
    2020-10-26
  • css3 transform過渡抖動問題解決

    這篇文章主要介紹了css3 transform過渡抖動問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習
    2020-10-23
  • css3 利用transform打造走動的2D時鐘

    這篇文章主要介紹了css3 利用transform打造走動的2D時鐘,幫助大家更好的利用cSS3制作特效,美化自身網頁,感興趣的朋友可以了解下
    2020-10-20

最新評論

免费人成视频在线观看