2D轉(zhuǎn)換之移動(dòng)

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

2D轉(zhuǎn)換之旋轉(zhuǎn)

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
            transform-origin: top left;  /*旋轉(zhuǎn)中心點(diǎn)，top left沒有順序之分*/
        }


        div:hover {
            transform: rotate(45deg);  /*默認(rèn)是按中心旋轉(zhuǎn)*/
        }

    </style>

2D轉(zhuǎn)換之縮放

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
            /*transform-origin: top left;/*旋轉(zhuǎn)中心點(diǎn)*/
        }


        div:hover { 
            transform: scale(0.5);  /*x軸y軸縮放比例都是0.5*/
        }
    </style>

2D轉(zhuǎn)換之斜切

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
            /*transform-origin: top left;/*旋轉(zhuǎn)中心點(diǎn)*/
        }


        div:hover {
            /*transform: rotate(45deg); 默認(rèn)是按中心旋轉(zhuǎn)*/
            /*transform: scaleX(0.5);*/  /*x軸y軸縮放比例都是0.5*/
            transform: skew(8deg, 10deg);
        }
    </style>