平面转换-平面-位移-基本使用

一.单独方向位移

• 语法：transform:translate(水平移动距离，垂直移动距离)；
• 取值(正负均可)：
  1.像素单位数值
  2.百分比（参照物为盒子自身尺寸）

• 技巧：
  1.translate()如果只给一个值表示x方向移动
  2.单独设置某个方向移动translateX()&translateY()

  transform: translateX(50px);
  transform: translateY(50px);

二.绝对定位居中
这个比较简单直接上代码图

三.平面旋转

• 语法：transform:rotate(360deg)(角度单位deg)
• 技巧：取值为正顺时针旋转为负则逆时针旋转
  
  四.转换原点
• 语法：
  1.默认原点是盒子中心点
  2.transform-origin:原点水平位置 原点垂直位置;
• 取值：
  1.方位名词（right.top.button.left.center）(常用)
  2.像素单位数值
  3.百分比
  
  五.多重转换
  边移动边旋转
  
  六.缩放
• 语法：transform:scale(x缩放倍数,y缩放倍数)
• 技巧：
  1.一般情况下scale中只写一个倍数，表示x,y等比例放大缩小
  2.scale(倍数)
  3.倍数大于1为放大，小于1为缩小