平面转换

平面转换

• 改变盒子在平面内的形态（位移、旋转、缩放）
• 2D转换

平面转换属性

transform

• 位移

  • 语法： transform: translate(水平移动距离, 垂直移动距离);

  • 取值（正负均可）

    1. 像素单位数值

    2. 百分比（参照物为盒子自身尺寸）

    3. 注意：X轴正向为右，Y轴正向为下

-   技巧

    1.  translate()如果只给出一个值, 表示x轴方向移动距离
    1.  单独设置某个方向的移动距离：translateX() & translateY(）

**位移-绝对定位居中** —— 实现方法：

   1.  方法一

```
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
```


   2. 方法二


```
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
```

• 旋转

  • 语法：transform: rotate(角度); 注意：角度单位是deg

  • 技巧：取值正负均可

    1. 取值为正, 则顺时针旋转
    2. 取值为负, 则逆时针旋转

• 转换原点

  • 语法：

    1. 默认圆点是盒子中心点
    2. transform-origin: 原点水平位置 原点垂直位置

  • 取值：

    1. 方位名词（left、top、right、bottom、center）
    2. 像素单位与取值
    3. 百分比（参照盒子自身尺寸计算）

• 多重转换

  • 多重转换技巧

              位移       旋转
transform: translate() rotate();

• 多重转换原理

  1. 旋转会改变网页元素的坐标轴向
  2. 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

• 缩放

  • 语法： transform: scale(x轴缩放倍数, y轴缩放倍数)

  • 技巧

    一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

    transform: scale(缩放倍数)
    
      scale值大于1表示放大, scale值小于1表示缩小