• transform翻译成汉语具有”变换”或者”改变”的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果

  1.位移

• 将元素向指定的方向移动，类似于position中的relative。

• transform:translate(100px);向右移动100px
• transform:translate(100px,200px);向右移动100px向下移动200px
• transform:translateX(-100px);向左移动100px

• transform:translateY(-100px);向上移动100px

  2.旋转

• transform:rotate(30deg); 顺时针旋转

• transform:rotate(-30deg); 逆时针旋转

  2.1 转换中心

• transform-origin:第一个值表示水平 第二个值表示垂直;

  • 坐标
  • 百分比
  • 方位 left/right/center/top/bottom

3.缩放

• 缩放和旋转一样,默认都是以自己的中心点进行变化的
• transform:scale(2); 扩大为原来的二倍
• transform:scale(0.5);缩小为原来的0.5倍
• transform:scale(2,0.5); 水平方向扩大为原来的二倍，垂直方向缩小为原来的0.5倍
• transform:scaleX(2);水平方向扩大为原来的二倍
• transform:scaleY(2); 垂直方向扩大为原来的二倍

4.倾斜

• transform:skew(30deg); 默认沿着X轴方向进行倾斜
• transform:skewX(30deg); 沿着X轴方向进行倾斜
• transform:skewY(30deg); 沿着Y轴方向进行倾斜

5.元素居中第三种办法

父{
    position:relative;
}
子{
    position:absolute;
    top:50%;
    left:50%;
  /*移动自己尺寸的一半*/
    transform:translate(-50%,-50%);
}

6.位移+旋转的特殊性

• transform: translateX(200px) rotate(90deg);
• 元素既有位移又有旋转要写在一个transform中，空格隔开
• 元素旋转之后坐标也跟着旋转