css3之2d轉換（transform方法）

學習資料：菜鳥教程，http://www.runoob.com/css3/css3-2dtransforms.html；

1.transform的屬性之一：translate移動，

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。

效果不是特別好看，直接上代碼；

css代碼

#tanslate{
                height: 100px;
                width: 100px;
                background: orange;
                margin: 50px 50px;
                transition: .5s linear;
            }
            #tanslate:hover{
                transform: translate(100px,100px);
                
            }

html代碼：

<div id="tanslate">我是發生移動</div>；

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

#rotate{
                transform: rotate(30deg);
                -ms-transform: rotate(30deg);
                -moz-transform: rotate(30deg);

            }

3.scale（）寬高的縮放：該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數。

代碼：

#scale{
                transform:scale(0.5,3);
                -ms-transform: scale(0.5,3);
                -moz-transform: scale(0.5,3);
            }

寬變爲原來的二分之一，高變爲原來的兩倍。

4.skew()傾斜角度：

分別表示X軸和Y軸傾斜的角度，如果第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜。

#scale{
                transform:skew(45deg,30deg);
                -ms-transform: skew(45deg,30deg);
                -moz-transform: skew(45deg,30deg);
            }

5，matrix:他有六個參數，可以進行旋轉，平移，傾斜，縮放；

上代碼：.box:hover .borther-box{
                transform: matrix(0.8,0.5,-0.5,0.8,0,0);
            }

效果圖：