【CSS】transform相关知识点

1. transform实现移动：

transform:translate(x,y)
transform:translateX()
transform:translateY()

• 可以用像素也可以用百分比的形式，用百分比是相对自身元素的
• translate不会影响到其他元素的位置
• translate对行内标签无效

2. transform实现倾斜

• skew(x-angle,y-angle)：第一个参数表示水平方向上倾斜角度，第二个参数表示垂直方向上倾斜角度
• 正值向左倾斜，负值向右倾斜
• skewX(angle)：水平方向倾斜
• skewY(angle)：垂直方向倾斜

例：transform:skew(30deg,30deg);水平方向上倾斜30°，垂直方向上倾斜30°
transform:skew(30deg);只写一个参数，这种情况视为只在水平方向上倾斜，垂直方向不倾斜

3. transform实现旋转：

transform:rotate(度数)

• 度数单位deg
• 度数为正，顺时针旋转
  顺时针旋转90°：transform:rotate(90deg);
• 度数为负，逆时针旋转
  逆时针旋转90°：transform:rotate(-90deg);
• 默认旋转的中心点是元素的中心点

4. transform实现缩放：