CSS2D转换

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

二维坐标系

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

2D转换之移动translate

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

 1.语法

transform: translate(x,y);

transform: translateX(n);

transform: translateY(n);

2.重点 

• 定义2D转换中的移动，沿着X和Y轴移动元素；
• translate最大的优点：不会影响其它元素的位置；
• translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
• 对行内标签没有效果。

2D转换之旋转rotate

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

1.语法

transform:rotate(度数)

 2.重点

• rotate里面跟度数，单位是deg 比如rotate（45deg）；
• 角度为正时，顺时针，负时，为逆时针；
• 默认旋转的中心点是元素的中心点。

2D转换中心点transform-origin

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

1.语法

transform-origin：x y ;

2.重点

• 注意后面的参数x和y用空格隔开；
• x y默认转换的中心点是元素的中心点（50%，50%）；
• 还可以给x y设置像素或者方位名词 （top bottom left right center)。

2D转换之缩放scale

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

1.语法

transform：scale（x，y）；

2.重点

• 注意其中x和y用逗号分隔；
• transform:scale（1，1）：宽和高都放大一倍，相当于没有放大；
• transform:scale（2，2）：宽和高都放大了2倍；
• transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样,相当于scale（2，2）。
• transform:scale（0.5，0.5）：缩小
• scale缩放最大的优势：可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其它盒子。

2D转换综合写法

• 同时使用多个转换，其格式为：transform:translate() rotate() scale…等；
• 其顺序会影响转换的效果（先旋转会改变坐标轴方向）；
• 当我们同时有位移和其它属性的时候，记得要将位移放到最前。

2D转换小结：

• 转换transform我们简单理解就是变形有2D和3D之分；
• 我们暂且学了三个分别是位移 旋转和缩放；
• 2D移动translate（x，y）最大的优势是不影响其它盒子，里面参数用%，是相对于自身宽度和高度来计算的；
• 可以分开写比如translateX（x）和translateY（y）；
• 2D旋转rotate（度数） 可以实现旋转元素 度数的单位是deg；
• 2D缩放scale（x，y）里面参数是数字不跟单位 可以是小数 最大的优势 不影响其它盒子；
• 设置转换中心点transform-origin：x y；参数可以百分比，像素或者是方位名词；
• 当我们进行综合写法，同时具有位移和其它属性的时候，记得要将位移放到最前；