css3-变形transforms

语法

 transform: rotate | scale | skew | translate |matrix;

注：以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开

2D

旋转 rotate（deg）//值为正时顺时针，为负时，逆时针

移动translate（x,y）//若第二参数没写，默认为0

       translateX（x）

       translateY（y）

缩放 scale（x,y）//若第二参数没写，则与第一个相同

        scaleX（x）//缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小

        scaleY（y）

扭曲 skew(x,y)/第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度,若第二参数没写，默认为0

       skewX（x）

       skewY（y）

矩阵 matrix,不常用

注：基点默认为元素的中心点，可以根据transform-origin进行改变基点，只有上面用过transform属性，该属性才能生效(一般在旋转，斜切，缩放中用到)

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。

其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom

 

1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%（默认值）

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%

兼容性