31-2D转换

位移

• 控制元素以原来的位置作为参考进行移动

  transform:tranlateX(x轴移动量)
  transform:tranlate(x轴移动量)
  transform:tranlateY(y轴移动量)
  transform:tranlate(x轴移动量,y轴移动量)
  

旋转

• 控制元素进行旋转

  1.沿着x轴方向进行旋转
  transform:rotateX(角度)
  2.沿着y轴方向进行旋转
  transform:rotateY(角度)
  3.沿着中心点进行旋转，正值则为顺时针
  transform:rotate(角度)
  

  • 单位为角度，deg

缩放

• 控制元素放大或者缩小

  1.等比例放大或者缩小
  transform:scale(倍数)
  2.宽度放大或者缩小
  transform:scaleX(倍数)
  2.高度放大或者缩小
  transform:scaleY(倍数)
  

  • 值为数字：

    • 0：当前元素不可见
    • 0~1：缩小效果
    • 1：跟图片原本效果一致
    • >1：图片放大

倾斜(了解)

• 控制元素进行倾斜

  transform:skew(角度)transform:skewX(角度)transform:skewY(角度)
  

组合变化

transform: css属性值1 css属性值2 css属性值3;

• 旋转会改变坐标轴的方向

转换基点

• 旋转和缩小都是默认以盒子中心点进行相应变换

  transform-origin:x轴 y轴；