2D转化

2D转化位移

语法：

  transform: translate(x, y);

x 代表元素在水平方向的位移

y 代表元素在垂直方向的位移

例如：

    div {

    width: 200px;

        height: 200px;

        /*元素在水平方向向右移动200px，在垂直方向向下移动300px*/

        transform: translate(200px, 300px);

    }

总结：

1.如果只设置了一个，那么代表元素只在水平方向发生位移

2.可以设置负数，负数代表位移的相反方向

3.可以设置百分比，相对元素的宽度或者高度

4.位移没有让元素脱标

位移的使用小技巧：可以让绝对定位的元素居中显示

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

---

2D转化旋转

语法：

transform: rotate(角度)；

备注：

角度的单位是以 deg 为单位的。 如： 30deg [30度]

例如：

    div {

  width: 200px;

      height: 200px;

      transform: rotate(30deg)；

    }

总结：

1. 正数代表元素顺时针旋转

    2. 负数代表元素逆时针旋转

3. 默认是绕着元素中心位置旋转

4. 改变旋转中心位置通过 transform-origin 属性设置，取值为： left | right | top | bottom | cneter

例如：

        div {

  width: 200px;

          height: 200px;

          transform-origin: left top;

          transform: rotate(30deg);

        }

---

2D转化缩放

语法：

  transform: scale(width, height);

备注：

1. 第一个值width表示元素宽度的倍数【不能设置负数】

2. 第二个值height表示元素高度的倍数【不能设置负数】

例如：

    div {

        width: 200px;

        height: 200px;

        /*元素宽度是原来的2倍，高度是原来的3倍*/

        transform: scale(2, 3);

    }

总结：

1. 如果设置一个值，代表宽度和高度同时放大或缩小相应的倍数

2. 如果设置的值大于1，表示放大

3. 如果设置的值大于0,小于1,表示缩小

    4. 如果设置的值等于1，表示大小不变

  5. 如果设置的值等于0，表示宽度或高度为0

如果设置多个属性，要使用复合属性的写法

  transform: translate()  rotate()  scale()；