一、2D變形(CSS3) transform

transform是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、傾斜、縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。

1.移動【  translate(x, y)  】

translate是移動、平移的意思，也就是在2D平面內以X軸和Y軸為標準進行移動。

格式（x和y可為負值）：

 translate可以用來讓已經定位的盒子水平垂直居中。

以前的水平居中方式：

.box {
            width: 499.9999px;
            height: 400px;
            background: pink;
            position: absolute;
            left:50%;
            top:50%;
            /*讓盒子在X軸和Y軸都走自己的一半，以達到居中的目的*/
            margin-top: -200px;
            margin-left: -250px;
        }
 

用translate方式水平垂直居中：

.box {
            width: 499.9999px;
            height: 400px;
            background: pink;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);  /* 走的自己的一半 */
        }

2.縮放【  scale(x, y)  】

格式：

可以對元素進行水平/垂直方向的縮放，以上語句的意思是  該元素在水平方向上縮小了20%，垂直方向上不變。

 scale的預設值為1，數值為0-0.99時該元素縮小，>1時該元素方法。

3.旋轉【  rotate(x deg)  】

對元素進行旋轉，正值為順時針，負值為逆時針。

格式：

 注意deg是度數。

4.transform-origin調整元素轉換變形的原點

scale/rotate都可以用t-r來規定發生變化的原點。

 示例：

rotate：

        div {
            width: 500px;
            height: 300px;
            background-color: red;
            transition: all 0.5s;
            transform-origin: right top;
            margin: 100px auto;
        }
        div:hover {
            transform: rotate(180deg);
        }

scale： 

div {
            width: 500px;
            height: 300px;
            background-color: red;
            transition: all 0.5s;
            transform-origin: right top;
            margin: 100px auto;
        }
        div:hover {
            transform: scale(2);
        }

自行測試。

案例：

目標效果：

圖片：

程式碼：

       div {
            width: 225px;
            height: 150px;
            margin: 300px auto;
            position: relative;
        }
        img {
            width: 225px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: top right;
            transition: all 0.5s;
        }
        div:hover img:first-child {
            transform: rotate(60deg);
        }
        div:hover img:nth-child(2) {
            transform: rotate(120deg);
        }
        div:hover img:nth-child(3) {
            transform: rotate(180deg);
        }
        div:hover img:nth-child(4) {
            transform: rotate(240deg);
        }
        div:hover img:nth-child(5) {
            transform: rotate(300deg);
        }
        div:hover img:last-child {
            transform: rotate(360deg);
        }

<div>
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <img src="images/5.jpg" alt="">
    <img src="images/6.jpg" alt="">
</div>

5.傾斜【   skew(x deg, y deg)   】

格式：

該例項通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

可以使元素按一定的角度進行傾斜，可為負值，第二個引數不寫預設為0。

二、3D變形(CSS3) transform

                                            3D運用比較少，後期基本都用JS製作3D效果，所以瞭解一下就可以。

2D指的是 X軸和Y軸

3D指的是 X軸  Y軸  Z軸

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手座標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖

 CSS3中的3D座標系與上述的3D座標系是有一定區別的，相當於其繞著X軸旋轉了180度，如下圖

1.旋轉【rotate】

（1）rotateX()

也就是沿著X軸立體旋轉。

示例：

圖片：

程式碼： 

img {
            transition:all 0.5s ease 0s;
        }
        img:hover {

            transform:rotateX(180deg);
        }

<div>
    <img src="images/x.jpg" alt="">
</div>

（2）rotateY()

沿著Y軸立體旋轉

示例：

圖片：

程式碼：

img {
            transition:all 0.5s ease 0s;
        }
        img:hover {
            /*transform:rotateX(180deg);*/
            transform:rotateY(180deg);
        }

<div>
    <!--<img src="images/x.jpg" alt="">-->
    <img src="images/1498446043198.png" alt="">
</div>

（3）rotateZ()

沿著Z軸旋轉。

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

2.透視（perspective）

電腦顯示屏是一個2D介面，之所以有3D效果，靠的是透視效果。

透視距離原理：近大遠小

 示例：

body {
		perspective: 500px;
}
img {
		transition: all 5s;
}
img:hover {
		transform: rotateY(360deg);
}

<img src="images/1498446043198.png" alt="">

效果自行測試，圖片上方已有。

3.移動【translate】

（1）translateX(x) / translateY(y) 已經講過，此處不再贅述。

（2）translateZ(z) 

transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就一定會說到離什麼參照物遠或近，在這裡參照物就是perspective屬性）。

比如設定了perspective為200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當於跑到後腦勺去了，我相信你正常情況下，是看不到自己的後腦勺的。

（3）translate3d(x, y, z)

其中x和y可以是長度值也可以是百分比，百分比是相對於其本身元素水平方向的寬度和垂直方向的高度，而z只能設定長度值。

（4）backface-visibility

backface-visibility 屬性定義當元素不面向螢幕時是否可見。

案例：

程式碼：

        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 224px;
            height: 224px;
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 4s;

        }
        /*第二個img進行了180度翻轉，因為設定了不面向螢幕則隱藏，所以一旦翻轉不面向，則隱藏，就露出了背面的第二張圖片。*/
        img:last-child {
            backface-visibility: hidden;
        }
        div:hover img {
            -webkit-transform: rotateY(180deg);
        }

<div>
    <img src="images/qian.svg" alt="">
    <img src="images/hou.svg" alt="">
</div>

效果：

滑鼠經過前：

滑鼠經過後：

三、瀏覽器字首

 為了適應不同瀏覽器的相容性，在新增的CSS3的屬性都會增加字首：

例如在webstrom中，如果輸入transform：

點選tab後：

會自動為你填充格式。

需要注意一下在動畫keyframs中，-webkit-並不是字首，而是放在@符號之後：