CSS之2D转换

2D装换

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

转换( transform )你可以简单理解为变形

• 移动: translate
• 旋转: rotate
• 缩放:scale

二维坐标系

1. 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
   x轴水平向右，y轴水平向下

2D转换之移动translate

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

2. 语法

    transform:translate(x,y);或者分开写
    transform:translateX(n);
    transform:translateY(n);
   

3. 重点

   1. 定义2D转换中的移动，沿着X和Y轴移动元素
   2. translate最大的优点∶不会影响到其他元素的位置
   3. translate中的百分比单位是相对于自身元素的translate:(50%,50%);
   4. 对行内标签没有效果

（1）2D转换之旋转rotate

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

2. 语法

    transform : rotate(度数)
   

3. 重点

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

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

1.语法
transform : rotate(度数)
2.重点

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

（3）2D转换之旋转中心点

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

2. 语法

   transform-origin: x y;

3. 重点

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

（4）## 2D缩放scale

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

2. 语法

    transform : scale(x,y) ;
   

3. 注意

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

（5）2D转换综合写法

注意:

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