<div class="wrapper">
    <div class="inner">
    </div>
</div>

<style>
    .wrapper {
        width: 300px;
        height: 300px;
        /* solid - 實線 */
        /* dashed - 虛線 */
        border: 1px dashed red;
        margin: 0 auto;
    }
    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
    }
</style>

border: 1px dashed red; solid為實線；dashed為虛線。
margin: 0 auto;，margin后面如果只有兩個參數(shù)的話，第一個表示top和bottom，第二個表示left和right。
因為0 auto，表示上下邊界為0，左右則根據(jù)寬度自適應(yīng)相同值（即居中）。

1、translate()（平移）

1.1、X軸偏移

.inner {
        width: 200px;
        height: 200px;
        border: 1px solid green;
        /* 
         *X軸方向偏移
         */ 
        /* 1、正向偏移水平長度的50% ，也就是寬度的一半100px*/
        transform: translate(50%);
        /* 2、正向偏移100px */
        transform: translateX(100px);
        /* 3、正向偏移100px */
        transform: translate(100px);
    }

如上圖所示，X軸偏移的方法有如下三個

• transform: translate(100px)
• transform: translate(50%)
• transform: translateX(100px)

1.2Y軸偏移

    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* 
         *Y軸方向偏移
         */
        /* 正向偏移100px */
        transform: translate(0,100px);
        transform: translateY(100px);
    }

如上圖所示，Y軸偏移的方法有如下兩個

• transform: translate(0,100px)
• transform: translateY(100px)

1.3、X、Y軸都發(fā)生偏移

如上圖所示，Y軸偏移的方法有如下一個

    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* 
         *X、Y軸方向偏移
         */
        /* X/Y正向偏移100px */
        transform: translate(100px,100px);
    }

注意：上述所說的都是X和Y軸的正向偏移，我們也可以給它設(shè)置成負數(shù)，使其往反向偏移，如transform: translate(-100px)；即為向x軸的反向（左側(cè)）偏移了100px。

2、scale()（縮放）

該函數(shù)只接受數(shù)字，不接受類似于”100px“。

2.1、X軸縮放

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /*
         *X軸縮放
         */ 
        transform: scale(2,1);
        transform: scaleX(2);
}

如上圖所示，X軸縮放的方法有如下兩個

• transform: scale(2,1)
• transform: scaleX(2)

2.2、Y軸縮放

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /*
         *Y軸
         */ 
        transform: scale(1,2);
        transform: scaleY(2);
}

如上圖所示，Y軸縮放的方法有如下兩個

• transform: scale(1,2)
• transform: scaleY(2)

2.3、X/Y軸縮放

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /*
         *X、Y軸
         */ 
        transform: scale(2);
        transform: scale(2,2);
}

如上圖所示，Y軸縮放的方法有如下兩個

• transform: scale(2)
• transform: scale(2,2)

3、rotate()（旋轉(zhuǎn)）

該函數(shù)只接受一個參數(shù)，也就是角度。

    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* deg - 一圈等于360deg */
         transform: rotate(120deg); 
        
        /* grad - 一圈等于400grad */
         transform: rotate(120grad); 
        
        /* rad -一圈等于6.28rad */
        transform: rotate(1rad); 
        
        /* turn - 一圈等于1turn */
        transform: rotate(0.3turn);
}

角度可以由以下四種不同的單位類型來定義。

• deg：一圈等于360deg。
• grad：一圈等于400grad。
• rad：一圈等于6.28rad。
• turn：一圈等于1turn。

4、skew()（傾斜）

該函數(shù)只接受一個參數(shù)，也就是角度。

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* 
         *X軸
         */
        transform: skew(20deg);
        transform: skewX(20deg);
        
        /*
         *Y軸
         */
        transform: skewY(20deg);
        
        /*
         *X/Y軸
         */
        transform: skew(20deg,20deg);
}

4.1、X軸傾斜

如上圖所示，X軸傾斜的方法有如下兩個

• transform: skew(20deg)
• transform: skewX(20deg)

4.2、Y軸傾斜

如上圖所示，Y軸傾斜的方法有如下一個

• transform: skewY(20deg)

4.3、X/Y軸傾斜

如上圖所示，X/Y軸傾斜的方法有如下一個

• transform: skew(20deg,20deg)