本文为解析 transform 属性系列的第三篇,未看前文的童鞋,阅读一下 第一篇 和 第二篇,会对本文有更好的理解。
matrix 矩阵运算公式
x’ = a * x + c * y + tx
y’ = b * x + d * y + ty详细运算过程请参考上一篇文章。
matrix 实现 rotate
回顾一下 rotate 的定义:
rotate(degree) |
---|
rotate 方法用于将元素旋转一定的角度。当 degree 的值为正数时,顺时针旋转元素;为负值时,逆时针旋转元素。 |
旋转元素,可以想象将元素分为好多分散的点,把元素中包含的每一个点绕着元素中心旋转。单个点的操作就类似于下图中的 A 点旋转一定角度后变为了 B 点,将旋转后所有点组合,就是旋转后的元素了。
由上图可见,给最初的角度 α 增加旋转角度 θ,A 点就由之前的位置变换到了 B 点。由此可以得出这样的信息:
- 点 A 是已知的
- 变换前后,线段 OA 和 OB 是相等的
- 旋转角度 θ 也是已知的
- 点 B 是未知点
将问题抽象出来,即:已知圆上的点 A,求将点 A 旋转角度 θ 后新位置点 B 的坐标?
有一个经典的坐标系统可以用来处理上面这个问题,它就是极坐标系(极坐标系的详细介绍请咨询度娘)。将以上问题用极坐标系表示如下图:
由上图得知:
A 点在直角坐标系与极坐标系的坐标转换关系为,
x = r * cos(ɑ)
y = r * sin(ɑ)
B 点在直角坐标系与极坐标系的坐标转换关系为,
x’ = r * cos(ɑ + θ)
y’ = r * sin(ɑ + θ)
注意此处, x 与 y 是上面问题已知数, θ 是上面问题的已知角度。
故:
x' = r * cos(ɑ + θ) = r * (cosɑ * cosθ - sinɑ * sinθ)
= r * cosɑ * cosθ - r * sinɑ * sinθ
= x * cosθ - y * sinθ
y' = r * sin(ɑ + θ) = r * (sinɑ * cosθ + cosɑ * sinθ)
= r * sinɑ * cosθ + r * cosɑ * sinθ
= y * cosθ + x * sinθ
Ps:三角函数相关运算不明白的话请咨询度娘。
结合矩阵运算公式,可以很容易的得到以下结论:
当 a 为 cosθ,c 为 -sinθ,b 为 sinθ,d 为 cosθ,且 tx 与 ty 均为 0 时,matrix 方法的功能就和 rotate 一样。即:
x' = a * x + c * y + tx y' = b * x + d * y + ty ↓ x' = cosθ * x - sinθ * y y' = sinθ * x + cosθ * y
了解了理论依据,下面用 matrix 来实现 rotate 的旋转效果:
代码如下:
.matrix-style-rotate {
/* transform: rotate(30deg); */
transform: matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0);
}
效果如下:
matrix 实现 skew
回顾一下 skew 的定义:
skew(xDegree, yDegree) |
---|
skew 方法用于将元素倾斜一定的角度。xDegree 代表沿水平方向(X轴)倾斜的角度,yDegree 代表沿竖直方向(Y轴)倾斜的角度。 |
相比于旋转效果而言,倾斜更好理解一些。与旋转不同的是,倾斜元素会改变元素的大小。
沿水平方向倾斜元素,可以想象将元素分为好多条竖直线,然后将每一条竖直线倾斜,最后再组合在一起,即为倾斜后的元素。而单条竖直线的倾斜类似于下图红色矩形中线段BO到蓝色矩形中线段BA的效果。
如图,将红色矩形向右倾斜角度 θ,就可以得到蓝色矩形。
将问题抽象出来,即:已知线段 BO 和倾斜角度 θ,求在水平方向倾斜后的点 A?
由三角函数公式,很容易得知上图中 OA 长度为 tanθ * BO。如问题所示,B 点的坐标已知为 (x, y),那么图中 A 点水平方向的坐标即为 tanθ * y。而相对于原始倾斜点来说,变换后水平方向坐标即为 x + tanθ * y。
同样的,沿竖直方向倾斜元素,可以想象将元素分为好多条水平线,然后将每一条水平线倾斜,最后再组合在一起,即为倾斜后的元素。而单条水平线的倾斜类似于下图红色矩形中线段BO到蓝色矩形中线段BA的效果。
如图,将红色矩形向下倾斜角度 θ,就可以得到蓝色矩形。
将问题抽象出来,即:已知线段 BO 和倾斜角度 θ,求在竖直方向倾斜后的点 A?
由三角函数公式,很容易得知上图中 OA 长度为 tanθ * BO。如问题所示, B 点的坐标已知为 (x, y),那么图中 A 点竖直方向的坐标即为 tanθ * x。而相对于原始倾斜点来说,变换后竖直方向坐标即为 y + tanθ * x。
结合矩阵运算公式,可以很容易的得到以下结论:
当 a 为 1,c 为沿水平方向倾斜角度 θ 的正切值,b 为 1,d 为沿竖直方向倾斜角度 θ’ 的正切值,且 tx 和 ty 均为 0 时,matrix 方法的功能就和 skew 方法一样。即:
x' = a * x + c * y + tx y' = b * x + d * y + ty ↓ x' = x + tanθ * y y' = tanθ' * x + y
请注意此处 θ 和 θ’ 分别代表沿水平方向倾斜角度和沿竖直方向倾斜角度,它们可以相等也可以不相等。
明确了转换关系后,就可以用 matrix 来实现 skew 的倾斜效果:
代码如下:
.matrix-style-skew {
/* transform: skew(30deg, 30deg); */
transform: matrix(1, 0.577350, 0.577350, 1, 0, 0);
}
效果如下:
未完待续?
本文旨在解析方法执行之根本,知其然且知其所以然,应为我辈之追求。未完待续否?余下精彩,期待你来开发!
更多 CSS 技巧,请关注微信公众号