css3中的變形（transform）

transform 字面上的意思就是 使改變外觀、改變形態

在css3中transform主要包括如下幾種

1.旋轉 rotate

2.傾斜 skew

3.縮放 scale

4.移動 translate

下面咱們就一塊兒來看看transform的rotate、skew、scale、translate具體如何實現。

語法

transform：none

transform：rotate | skew | scale | translate

none：表示不進行變換

表示一個或多個變換函數，空格分開，意思就是咱們同時對一個元素進行transform的多種屬性操做，使用多個屬性時須要有空格隔開

1、旋轉rotate

transform:rotate()；
旋轉；其中「deg」是「度」的意思，如「10deg」表示「10度」

rotate()方法，
經過指定的角度參數對元素指定一個2D rotation(2D旋轉)

在一個給定度數順時針旋轉的元素。負值是容許的，這樣是元素逆時針旋轉。

下面我就作一個「福字」例子

html

<div class="box">

    <div class="box1">

        福

    </div>

</div>

css

<style>
    html,body{
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
    }
    .box{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left:calc(50% - 50px);
        top:calc(50% - 50px);
                
        transform: rotate(45deg);
    }
    .box .box1{
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        line-height: 100px;
                
        transform: rotate(135deg);
    }
</style>

例：

2、傾斜 skew

傾斜具備三種狀況

skew(x,y)使元素在水平和垂直方向同時傾斜（X軸和Y軸同時按必定的角度值進行傾斜變形）；

skewX(x)僅使元素在水平方向傾斜變形（X軸傾斜變形）；

skewY(y)僅使元素在垂直方向傾斜變形（Y軸傾斜變形）

3、縮放 scale

縮放scale和傾斜skew是極其類似，也具備三種狀況

scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；

scaleX(x)元素僅水平方向縮放（X軸縮放）；

scaleY(y)元素僅垂直方向縮放（Y軸縮放）

但它們具備相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數爲1，若是其值大於1元素就放大，反之其值小於1，元素縮小。

4、移動translate

移動translate和skew、scale同樣一樣具備三種狀況

translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；

translateX(x)僅水平方向移動（X軸移動）；

translateY(Y)僅垂直方向移動（Y軸移動）

如下列出了全部的轉換屬性

2D轉換方法

若是文中有不妥或者錯誤的地方還望高手的您指出，以避免誤人子弟。

若是您有更好的建議，不如留言一塊兒討論，共同進步！ 再次感謝您耐心的讀完本篇文章。

vx:bsl521921