二十七、2D转换

2D转换

转换（transform）时css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

移动：translate

旋转：rotate

缩放：scale

1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

1.2 2D转换之translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform:translate（x，y）或分开写

transform:translateX(n)

transform:translateY(n)

重点：

定义2D转换中的移动，沿着X和Y轴移动元素。

translate最大的优点：不会影响到其它元素的位置。

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

对行内标签没有效果。

1.3 2D转换之旋转rotate

2D旋转指的是让元素在二维平面内顺时针旋转或逆时针旋转。

语法：transform:rotate(度数)

重点：

rotate里面跟度数，单位是deg比如rotate（45deg）

角度为正时，顺时针，负时，为逆时针。

默认旋转的中心点是元素的中心点。

1.4 2D转换中心点transform-origin

语法：transform-origin:x,y

重点：

注意后面的参数x和y用空格隔开。

x y 默认转换的中心点是元素的中心点（50%，50%）

还可以给x y设置像素或者方位名词（top bottom left right center）

1.5 2D转换之缩放

缩放，顾名思义，可以放大和缩小。，只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

transform：scale(x,y)

注意：

注意其中的x和y用逗号分割。

transform：scale(1,1)  宽和高都放大一倍，相当于没有放大。

transform：scale(2,2)  宽和高都放大2倍

transform：scale（2）只写一个参数，第二个参数则与第一个参数一样，相当于scale(2,2)

transform：scale（0.5，0.5）缩小

scale缩放最大的优势：可以设置转换中心缩放，默认以中心点缩放的，而且不影响其它盒子。

1.6 2D转换综合写法

注意：

1、同时使用多个转换，其格式为：transform：translate() rotate() scale() ……等

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

3、当我们同时有位移和其它属性的时候，记得将位移放到最前。