CSS——2D转换

如果你不甘于平凡的自己，那就不顾一切去奔跑吧！

---

一. 2D转换（平面转换）

作用：改变盒子在平面内的位移，旋转，缩放。

1. 位移：transform: translate(水平移动距离, 垂直移动距离);

    取值：数字+px，百分比。

   *注意：X轴正向为右，Y轴正向为下。

   单独设置某个方向的移动距离：translateX() & translateY()

2. 旋转：transform: rotate(数值+deg)；

    取值：值为正数，顺时针旋转；值为负数，逆时针旋转。

*扩展：

         改变圆点位置：transform-origin：圆点水平位置  圆点垂直位置；

3. 缩放：transform: scale(x轴缩放倍数, y轴缩放倍数);

只取一个值的时候，表示等比缩放   transform: scale(缩放倍数);

*注意：scale值大于1表示放大, scale值小于1表示缩小。