transform 属性之简单变换方法

本文是解析 transform 属性系列的第一篇。

定义

transform 属性用于给元素应用 2D 或 3D 变换。通过该属性，我们可以对元素进行旋转、缩放、移动或倾斜。

transform：none | transform-functions;

2D 转换常用的方法如下：

translate(x, y)
translate 方法用于移动元素，x 代表横向移动距离，y 代表纵向移动距离。

如上图，图片的移动即是通过设置 translate() 方法实现的。
代码如下：

.transform-style {
    transform: translate(300px, 200px);
}

rotate(degree)
rotate 方法用于将元素旋转一定的角度。当 degree 的值为正数时，顺时针旋转元素；为负值时，逆时针旋转元素。

rotate
如上图，当元素设置了 rotate() 方法之后，会在元素的原始位置应用旋转效果。
代码如下：

.transform-style {
    transform: rotate(45deg);
}

scale(widthRatio, heightRatio)
scale 方法用于将元素的尺寸成倍增加或减少。widthRatio 用于指定元素宽度的转换倍率，heightRatio 用于指定元素高度的转换倍率。

scale
如上图，通过使用 scale() 方法，我们将图片的宽度变为原来的一半，同时高度保持不变。这里也是以元素原始位置的中心点为中心进行转换的。
代码如下：

.transform-style {
    transform: scale(0.5, 1);
}

skew(xDegree, yDegree)
skew 方法用于将元素倾斜一定的角度。xDegree 代表沿水平方向（X轴）倾斜的角度，yDegree 代表沿竖直方向（Y轴）倾斜的角度。

skew-horizontal
如上图，我们给图片设置了沿水平方向的倾斜。对于沿水平方向的倾斜，设倾斜角度为 θ，当 tanθ 值为正数时，元素会向右倾斜（上边界向左倾斜，下边界向右倾斜）；当 tanθ 为负数时，元素会向左倾斜（上边界向右倾斜，下边界向左倾斜）。
代码如下：

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

skew-vertical
如上图，我们给图片设置了竖直方向的倾斜。对于沿竖直方向的倾斜，设倾斜角度为 θ，当 tanθ 值为正数时，元素会向下倾斜（左边界向上倾斜，右边界向下倾斜）；当 tanθ 为负数时，元素会向上倾斜（左边界向下倾斜，右边界向上倾斜）。
代码如下：

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

skew
如上图，我们给图片同时设置了沿水平方向和竖直方向的倾斜。
代码如下：

.transform-style {
    transform: skew(30deg, 30deg);
}

更多 CSS 技巧，请关注微信公众号
CSS Skill