transform 2D 平面转换

在以前我们改变元素的位置需要设置 left 、 right 这类的属性，它对其它元素有很大的影响，现在通过 transform 就可以实现任意空间的改变了。

1. 官方解释

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

2. 慕课解释

transfrom 这个属性可以改变一个目标元素在页面中的位置，例如相对原来元素所在的位置平移，相对原来的尺寸放大或者缩小，也可以旋转或者斜切。

3. 语法

通用坐标轴说明:

x 代表横轴，y 代表纵轴。

坐标轴效果图

包含参数：

4. 实例

接下来我们都是对 demo 这个元素进行操作。

<div class="demo"></div>

1. 使用 translate 让元素位移。

.demo {
    transform: translate(40px,40px);
}

效果图

translate 让元素位移效果图

2. 使用 translateX 让元素水平位移：

.demo {
    transform: translateX(80px);
}

效果图

translateX 让元素水平位移效果图

3. 使用 translateY 让元素在竖直方向上位移：

.demo {
    transform: translateY(40px);
}

效果图

translateY 让元素水平位移效果图

4. 使用 scale 对元素缩放：

.demo {
    transform: scale(.8,.8);
}

scale 接受一个倍数大于 1 时候放大，小于 1 时候缩小。当 x，y 参数的值一样时，可以如下面这样写：

.demo {
    transform: scale(.8);
}

如果只需要对水平方向缩放，可以向下面这样写，竖直方向同理：

.demo {
    transform: scaleX(.8);
}

效果图

缩放效果图

5. 使用 skew 对元素倾斜。

.demo {
    transform:skew(30deg,0deg);
}

效果图

斜切效果图

.demo {
    transform:skew(0deg,30deg);
}

效果图

斜切效果图

如果只是对一个方向斜切可以如下：

.demo {
    transform:skewX(30deg);
}

斜切效果图

6. rotate 使元素旋转一个角度。在 2D 效果中它只接受一个参数角度，并沿着顺指针方向开始。

.demo {
    transform:rotate(30deg);
}

效果图

旋转效果图

5. 兼容性

6. 场景

1. 在需要动画渲染改变元素位置时候。
2. 需要对场景进行缩放或者旋转时候。

7. 小结

1. 要分清 transform 和 transition，后者是过渡；
2. transform 可以使得元素位置改变，而不会影响其他围绕元素，所以可以使用 transform 尽量使用，可以提高浏览器的渲染效率；
3. transform 中斜切的效果，我们拿 X 水平坐标轴为例，其实就是底部向右移动一个角度，这个角度就是竖直方向偏移的角度。