CSS3中的變形處理——transform功能（旋轉、縮放、傾斜、移動）

在CSS3中，可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的變形處理。

瀏覽器支持：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。 

 

1.旋轉

分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉，在參數中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉方向為順時針旋轉。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>旋轉</title>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #A4E786;
            margin: 20px auto;
            transition: all 1s ease-in-out;
        }

        .rotate:nth-child(2):hover {
            transform: rotate(45deg);
        }

        .rotate:nth-child(3):hover {
            transform: rotateX(45deg);
        }

        .rotate:nth-child(4):hover {
            transform: rotateY(45deg);
        }

        .rotate:nth-child(5):hover {
            transform: rotateZ(45deg);
        }

        .rotate:nth-child(6):hover {
            transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
        }

        .rotate:nth-child(7):hover {
            transform: scale(0.5) rotateY(45deg) rotateZ(45deg);
        }

        /* 在使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基准點進行變形的。 */
        /* transform-origin屬性，可以改變變形的基准點。 */
        /* 基准點在元素水平方向上的位置屬性值：left、center、right */
        /* 基准點在元素垂直方向上的位置屬性值：top、center、bottom */
        .rotate:nth-child(8):hover {
            transform: rotate(45deg);
            transform-origin: left bottom; //把基准點修改為元素的左下角
        }

        /* 分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉，在參數中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉方向為順時針旋轉。 */
    </style>
    <body>
        <div class="rotate">1</div>
        <div class="rotate">2</div>
        <div class="rotate">3</div>
        <div class="rotate">4</div>
        <div class="rotate">5</div>
        <div class="rotate">6</div>
        <div class="rotate">7</div>
        <div class="rotate">8</div>
    </body>
</html>

 

2.縮放

分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放，在參數中指定縮放倍率。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>縮放</title>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #B5FEFB;
            margin: 20px auto;
            transition: all 1s ease-in-out;
        }

        .scale:nth-child(2):hover {
            transform: scale(0.5);
        }

        .scale:nth-child(3):hover {
            transform: scaleX(0.5);
        }

        .scale:nth-child(4):hover {
            transform: scaleY(0.5);
        }

        .scale:nth-child(5):hover {
            transform: scaleZ(0.5);
        }

        .scale:nth-child(6):hover {
            transform: scaleX(0.5) scaleY(0.5);
        }

        .scale:nth-child(7):hover {
            transform: scaleX(0.5) scaleY(0.5) rotateX(45deg);
        }

        /* 分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放，在參數中指定縮放倍率。 */
    </style>
    <body>
        <div class="scale">1</div>
        <div class="scale">2</div>
        <div class="scale">3</div>
        <div class="scale">4</div>
        <div class="scale">5</div>
        <div class="scale">6</div>
        <div class="scale">7</div>
    </body>
</html>

 

3.傾斜

分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜（無skewZ方法），在參數中指定傾斜的角度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>傾斜</title>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #DF68C5;
            margin: 20px auto;
            transition: all 1s ease-in-out;
        }

        .skew:nth-child(2):hover {
            transform: skew(45deg);
        }

        .skew:nth-child(3):hover {
            transform: skew(30deg, 30deg);
        }

        .skew:nth-child(4):hover {
            transform: skewX(45deg);
        }

        .skew:nth-child(5):hover {
            transform: skewY(45deg);
        }

        /* 分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜（無skewZ方法），在參數中指定傾斜的角度 */
    </style>
    <body>
        <div class="skew">1</div>
        <div class="skew">2</div>
        <div class="skew">3</div>
        <div class="skew">4</div>
        <div class="skew">5</div>
    </body>
</html>

 

4.移動

分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動，在參數中加入移動距離。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>移動</title>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #DF68C5;
            margin: 20px auto;
            transition: all 1s ease-in-out;
        }

        .translate:nth-child(2):hover {
            transform: translate(50px);
        }

        .translate:nth-child(3):hover {
            transform: translate(50px, 50px);
        }

        .translate:nth-child(4):hover {
            transform: translateX(50px);
        }

        .translate:nth-child(5):hover {
            transform: translateY(50px);
        }

        .translate:nth-child(6):hover {
            transform: translateZ(50px);
        }

        /* 分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動，在參數中加入移動距離。 */
    </style>
    <body>
        <div class="translate">1</div>
        <div class="translate">2</div>
        <div class="translate">3</div>
        <div class="translate">4</div>
        <div class="translate">5</div>
        <div class="translate">6</div>
    </body>
</html>

 

5.基准點（transform-origin）

沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。

我們需要在不同的位置對元素進行這些操作，那么我們就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置，以達到你需要的基點位置。

transform-origin(X,Y):

用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數值left,center,right；Y和X一樣除了百分值外還可以設置字符值top,center,bottom，這個看上去有點像我們background-position設置一樣。

transform-origin並不是transform中的屬性值，跟其他的css3屬性一樣，需要在不同的瀏覽內核中加上相應的前綴。

 

6.多方法組合變形

同時使用多個轉換，綜合使用這幾個用法其格式為 transform: translate() rotate() scale();

變形的順序是從左到右依次進行，順序會影響到轉換的效果(先旋轉會改變坐標軸方向)，順序可以隨意，不同的順序導致變形結果不同；

但我們同時有位置或者其他屬性的時候，個人習慣將位移放到最前面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多方法組合變形</title>
    </head>
    <style>
        div:nth-child(1) {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #FFC0CB;
            position: absolute;
            transition: all 1s ease-in-out;
        }

        div:nth-child(1):hover,
        div:nth-child(2) {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #DF68C5;
            position: absolute;
            transform: translate(100px, 100px) rotate(45deg) scale(0.5) skew(30deg, 30deg);
        }
    </style>
    <body>
        <div>變化前</div>
        <div>變化后</div>
    </body>
</html>