2D转换

2D转换 transform

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换也可以简单理解为变形。
可分为三种：
移动：translate
旋转：rotate
缩放：scale
下面我们就来详细的讲一下他们分别有什么作用

1、二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，我们先来学习一下二维坐标系。
坐标和我们认为的是有点不一样的，话不多说上图体会一下：

二、移动 translate

移动是2D转换里面的一种功能。
作用：可以改元素在页面中的位置，类似定位。
1、它的语法和取值：
transform：translate(x，y) ；
也可以单独文开写：
transform：translateX(n) ；
transform：translateY(n) ；
2、注意：
（1）、定义2D转换中的移动，沿着X和Y轴移动元素；
（2）、translate中的百分比单位是相对于自身元素的半径来说的transform：(50%，50%)；
（3）、对行内元素没有效果。
（4）、分开写的时候X，Y要大写，不分开写的时候要把它们用逗号隔开。
translate最大的优点：不会影响到其他元素的位置；

旋转 rotate

旋转的作用为：让元素在二维平面内顺时针旋转或者逆时针旋转。
1、语法：
trans fom:rotate (度数)
2、注意：
（1）、rotate里面跟度数 ，单位是deg比如rotate(180deg)；
（2）、角度为正时,顺时针,负时,为逆时针；
（3）、默认旋转的中心点是元素的中心点。

转换中心点 transform-origin

作用：我们可以设置元素转换的中心点。
1、语法：
transform-origin：x y；
2、注意：
（1）、后面的参数x和y一定要用空格隔开；
（2）、xy默认转换的中心点是元素的中心点(50% 50%)；
（3）、还可以给xy设置像素或者方位名词( top/bottom/left/right/center)。

缩放 scale

缩放的作用：可以放大和缩小。
只要给元素添加上了这个属性就能控制它放大还是缩小。
1、语法：
transform：scale(x，y)；
2、注意：
（1）、其中的x和y是用逗号分隔开的；
（2）、transform：scale(1,1) : 宽和高都放大一倍，相对于没有放大。
（3）、transform：scale(2,2)：宽和高都放大了2倍；
（4）、简单写法：transform：scale(2)：只写一个参数，第二个参数则和第一个参数一样相当于scale(2,2)；
（5）、transform：scale(0.5，0.5)：缩小，只要输入的数值是小于1的就是缩放效果；
（6）、sacle缩放最大的优势为：在于可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他元素。

转换的综合写法

前面讲的这些东西是可以一起写的就是我们上面标题说的综合写法。
但是要格外注意以下几点：
注意：
1、同时使用多个转换，其格式为： transform：translate() rotate() scale()…等等，一定要注意的一点：它们之间一定要用分号隔开；
2、它们的顺序会影响转换的效果。( 先旋转会改变坐标轴方向)；
3、当我们同时有位移和其他属性的时候，记得一定要将位移放到最前面。