2D转换

2D转换

• transform
• 2D移动：translate()。使用translate()函数，可以把元素从原来的位置移动，移动参照元素左上角原点
  • 语法：translate(x px) | translate(x, y px)
  • 只设置一个参数表示向x方向移动，设置两个参数表示向x和y方向移动
  • 也可以使用translateX(x)或者translateY(y)
  • 执行完毕之后会回到原始状态
  • 有一个很重要的应用，就是如果想要在一个div里面设置另一个div水平垂直都居中在之前是没有办法实时实现的，而现在可以通过子绝父相，然后设置上左都是50%，最后用transform: translate(-50%, -50%)来实时实现
• 2D缩放：scale()。使用scale()函数，让元素根据中心原点对对象进行缩放，默认值为1
  • 语法：scale(x & y) | scale(x, y)
  • 只设置一个值，是让整体缩放，设置两个值则是各自设置
  • 不会影响其他元素的位置
  • 也可以设置scaleX()或者scaleY()
• 2D旋转：rotate(90deg)。使用rotate()函数，通过传入的角度值使元素绕z轴旋转
• 2D斜切：skew(90deg)。使用skew()函数，能够让元素倾斜显示。它可以将一个对象以其中心位置围绕x轴和y轴按照一定角度倾斜
  • 语法：skew(x) | skew(x, y)
    • x用来指定元素水平方向倾斜的角度，y同理为垂直方向
    • 也可以使用skewX()或者skewY()
    • 如果角度值为正，则向当前轴的负方向斜切，如果角度为负，则向当前轴的正方向斜切
• 旋转轴心：transform-origin
  • 属性值
    • 具体值，transfrom-origin: x y
    • 关键字：left top center right bottom
• 多个转换
  • 如果想要对一个元素进行多种转换效果，只需要在添加完一种转换效果之后使用空格隔开继续添加
  • 注意：旋转也会将当前的坐标系一起旋转，所以先旋转再移动和先移动再旋转是不同的