2D 转换

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

转换（transform）可以简单理解为变形

translate                移动

rotate                     旋转

scale                      缩放

 1，二维坐标系

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

 

2，移动 translate

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

1，语法： 

transform：translate（x，y）； 或者分开写

transform：translateX（n）；

transform：translateY（n）；

transform：translate（100px，100px）；
/*只移动x坐标*/
transform：translate（100px，0）；

2，重点：

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

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

translate中的百分比单位是相对于自身元素的translate（50%，50%）；

对于行内标签（如 span）没有效果

3，旋转 rotate

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

1，语法：

transform：rolate（度数）

2，重点

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

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

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

 4，设置旋转中心点 transform-origin

我们可以设置元素转换的中心点

1，语法：

transform-orgin：x y；

2，重点

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

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

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

transform-origin：left bottom；
transform-origin：50px 50px；
transform-origin：50% 50%；

5，缩放 scale

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

1，语法

transform：sclae（x，y）；（宽 高）

2，注意

注意其中的x和y用逗号隔开

transform：scale（1,1）：宽和高都放大一倍，相当于没有放大

transform：scale（2,2）：宽和高都放大2倍

transform：scale（2）相当于transform：scale（2,2）

transform：scale（0.5,0.5）：缩小

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

6，2D转换综合写法

注意：

1，同时使用多个转换，其格式为：transform：translate（） rotate（） scale（）...等

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

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