css3有趣的transform形變

不知名前端李小白發表於2022-02-01
CSSS3ORM

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

語法：

div{
    transform: none|transform-functions;
}

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

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

屬性值：

值描述
translate(x,y) 沿著 X 和 Y 軸移動元素。
translateX(n) 沿著 X 軸移動元素。
translateY(n) 沿著 Y 軸移動元素。
scale(x,y) 縮放轉換，改變元素的寬度和高度。
scaleX(n) 縮放轉換，改變元素的寬度。
scaleY(n) 縮放轉換，改變元素的高度。
rotate(angle) 旋轉，在引數中規定角度。
rotateX() 圍繞 X 軸旋轉
rotateY() 圍繞 Y 軸旋轉
skew(x-angle,y-angle) 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle) 傾斜轉換，沿著 X 軸。
skewY(angle) 傾斜轉換，沿著 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 過渡屬性，不然在形變時會很生硬

效果如下：

css3有趣的transform形變

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

css3有趣的transform形變

rotateX圍繞X軸旋轉：

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

css3有趣的transform形變

 rotateY圍繞Y軸旋轉：

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

 css3有趣的transform形變

 

二、translate（位移）

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

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

translateX()元素在X軸移動

translateY()元素在Y軸移動

css3有趣的transform形變

下面分別演示這三個功能效果：

.box:hover{
    transform: translate(40px,80px); /* 向X軸移動+40px，向y軸移動+80px */
}

效果如下：

css3有趣的transform形變

注意：如果translate()值傳遞一個值，則預設和translateX()效果一致

 

translateX()元素在X軸移動

.box:hover{
    transform: translateX(50px); /* 向X軸移動+50px */
}

 效果如下：

css3有趣的transform形變

 

translateY()元素在Y軸移動

.box:hover{
    transform: translateY(50px); /* 向Y軸移動+50px */
}

效果如下：

css3有趣的transform形變

 

三、scale（縮放）

 CSS 函式 scale() 用於修改元素的大小。可以通過向量形式定義的縮放值來放大或縮小元素，同時可以在不同的方向設定不同的縮放值

css3有趣的transform形變

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

  • 當座標值處於區間 [-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);
}

設定一個值就是均等縮放，效果如下：

css3有趣的transform形變

 

設定兩個值就是在X和Y兩個維度縮放並移動縮放中心，例子如下：

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

css3有趣的transform形變

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

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

css3有趣的transform形變

 

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

如果值為負數，則反向映象放大：

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

css3有趣的transform形變

 

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

scaleX()只在X軸方向縮放：

.box:hover{
    transform: scaleX(2); /* x方向放大兩倍 */
    /* or */
    transform: scale(2,1);
}

css3有趣的transform形變

 

scaleY()只在Y軸方向縮放：

.box:hover{
    transform: scaleY(2); /* Y方向放大兩倍 */
    /* or */
    transform: scale(1,2);
}

css3有趣的transform形變

 

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

效果如下：

css3有趣的transform形變

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

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

css3有趣的transform形變

 

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

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

css3有趣的transform形變

 

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

skewX()只在X軸方向傾斜：

.box:hover{
    /* 只在X軸上傾斜元素 */
    transform: skewX(30deg);
}

css3有趣的transform形變

 

skewY()只在Y軸方向傾斜：

.box:hover{
    /* 只在Y軸上傾斜元素 */
    transform: skewY(30deg);
}

css3有趣的transform形變

 

五、transform-origin（基點）

 transform-origin CSS屬性讓你更改一個元素變形的原點

語法：

/* 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); /* 旋轉 */
}

效果如下：

css3有趣的transform形變

 

栗子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); /* 旋轉 */
}

效果如下：

css3有趣的transform形變

 

栗子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有趣的transform形變

 

 

六、結束語

到這裡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>

效果如下：

css3有趣的transform形變

 

下面我們把transform的屬性值順序換一下看看效果：

.box:hover{
    transform: rotate(30deg) translateX(100px) skew(20deg);
}

css3有趣的transform形變

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

本篇分享到此結束，最後祝大家新年快樂，虎年大吉！????????

 

相關文章