转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换也可以简单理解为变形。可分为三种：移动：translate旋转：rotate缩放：scale
2D坐标：

2D转换-移动(translate)

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

transform:translate(x,y); //或者分开写 x就是x轴上移动位置 y就是y轴上移动位置
transform:translateX(x); 单位可以是px像素 也可以百分比
transform:translateY(y);
重点

• 定义2D转换中的移动，沿着X和Y轴移动的元素
• translate最大的优点：不会影响其他元素的位置
• translate中的百分比单位是基于自身的属性，即transform:translate(50%,50%)是以自身宽度和高度的一半来进行移动的

• 对行内标签没有效果

  2D转换-旋转(rotate)

  2D旋转指让元素在二维平面内顺时针旋转或者逆时针旋转。
  
  transform:rotate(度数deg)
  重点

• rotate里面的数值跟的单位为deg，例如rotate(45deg) 旋转45度

• 角度为正数时顺时针旋转，角度为负数时逆时针旋转
• 默认旋转的中心电是元素的中心点

  CSS三角

  正方形给两个边，再进行旋转来制作三角

转换中心点 transform-origin

transform-origin:x y; //x y用空格隔开
注意：

• 后面的参数x 和y用空格隔开
• x，y的默认转换中心点是元素的中心点（50% 50%）50% 50% 等价于center center

• 可以给x，y设置像素值或者方位名词（top bottom left right conter）

  2D转换之缩放 scale

  
  transform:scale(x，y) //前者为X轴倍数，后者为Y轴倍数
  transform: scaleX(2); //将宽扩大2倍
  transform: scaleY(2); //将高扩大2倍
  scale缩放和设置宽高不同 ，scale以中心开始缩放，设置宽高由上边框开始缩放
  设置宽高的缩放
  宽高设置的缩放无法使四条边框一起缩放，所以缩放后元素在右上角，这点和2D缩放不同
  注意：

  • 缩放里数值小于1为缩小，数值大于1为放大
  • 括号里的值用逗号隔开
  • transform：scale(1,1) : 宽和高都放大一倍，相对于没有放大
  • transform：scale(2,2)：宽和高都放大了2倍
  • transform：scale(0.5，0.5)：缩小，只要输入的数值是小于1的就是缩放效果

  • sacle缩放最大的优势为：在于可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他元素

    2D转换综合写法

    注意：

  • 同时使用多个转换的格式为transform:translate() rotate() scale()…等

  • 顺序会影响转换效果（先旋转会改变坐标方向）
  • 当同时写位移和其他属性时，位移属性要写在最前面

2D转换总结

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