css3---转换(transform)

css3-转换transform

1、2D转换transform

1.缩放：scale;

2.移动：translate

3.旋转：rotate

4.倾斜：skew

1.1、缩放scale

transform:scale(x,y); 控制元素的放大和缩小

x:宽的倍数；y:高的倍数

**注意：**x和y用逗号隔开，scale缩放可以设置转换中心点，默认的是以中心点，不影响其他盒子

transform:scale(5);只有一个参数，相当于scale(5,5);

transform:scale(0.8,0.8)；缩小

1.2、移动translate

合起来写：transform:translate(X,Y);

分开写：transform:translateX(50px); transform:translateY(50px);

**注意：**translate中的百分比单位是相对于自身元素的translate(50%,50%)

translate类似于定位，不会影响其他元素的位置，对行内标签没有效果

1.3、旋转rotate

transform:rotate(角度)； 角度单位deg

**特点：**角度为正时 顺时针，角度为负时 逆时针；默认的中心点是元素中心点

**注意：**这个没有动画过程，需要手动在浏览器中修改rotate这个值，角度显示一直改变

1.4、转换中心transform-origin

transform-origin:x y;

中间是空格，默认转换中心点是元素中心点；还可以设置方位名词（top bottom left right center）；

常见写法：

transform-origin:50% 50%; 默认值 元素的中心位置，百分比相当于自身宽高；

transform-origin:top left; 左上角；

transform-origin:0; 只有一个值，第二个值默认是50%；

transform-origin:10px 10px; 距离左上角10px;

1.5、综合写法

1、同时使用多个转换，中间用空格隔开，格式为transform:translate() rotate() scale() …

2、顺序会影响转换的效果（先旋转会改变坐标的方向）

​ 1. transform: translate(150px, 50px) rotate(180deg); 这个会在向右向下位移过程中进行旋转。

​ 2.transform: rotate(180deg) translate(150px, 50px); 这个会先旋转，旋转之后坐标轴方向颠倒了， 然后他就会向左向上位移了。

所以 当我们同时有位移和其他属性的时候，记得要将位移放到最前。