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);

            }

效果图：