day13

1. 2d位移变形

我们目前学过，使用margin 和定位可以实现位移。下面我们使用transform来实现2d的位移。

• 属性：transform

  • x轴位移 transform:translateX(数值+px) 向右为正
  • y轴位移 transform:translateY(数值+px) 向下为正
  • xy都位移 transform:translate(x的位移，y的位移)

• 特点：

  • 1）移动之后占位，和相对定位一样
  • 2）移动的百分比是参考自己

• 应用：位移实现水平垂直居中

  /* 参考父元素一半 */
  left: 50%; 
  top: 50%;
  /* 参考自己本身的元素 */
  transform: translate(-50%,-50%); 

2. 2d旋转

• transform: rotateZ(数值+deg) 正数是顺时针，负数是逆时针
• rotate代表的是z轴旋转

3. 旋转和位移

• 先旋转和位移： 先旋转，整个坐标轴也会跟着旋转 位移的方向是根据新的坐标轴去位移

  transform: rotateZ(40deg) translateX(800px);

• 先位移后旋转 :

  transform: translateX(800px) rotateZ(40deg); 

4. 变形原点

• transform-origin: 水平 垂直

• 属性值：

  • 数值+px
  • 百分比
  • 关键词：水平left/right/center 垂直 top/center/bottom

5. 2d缩放

• transform:scaleX(数值) 0：相当于隐藏 1：不放大也不缩小 >1放大 0-1 缩小
• transform:scaleY(数值) 0：相当于隐藏 1：不放大也不缩小 >1放大 0-1 缩小
• transform:scale(x缩放,y缩放)
• transform:scale(数值) xy都生效

6. 倾斜

• transform: skewX (倾斜度数 数值+px)
• transform: skewY (倾斜度数 数值+px)
• transform: skew (倾斜度数 数值+px)