3.2 KiB
3.2 KiB
CSS的transforn详解
使用正常的方法
.demo{
transform:translate(10px, 20px) rotate(30deg) scale(1.5, 2);
}
matrix
.demo{
transform:matrix(0.75, 0.8, -0.8, 1.2, 10, 20)
}
matrix 与矩阵对应
.demo{
transform:matrix(a,b,c,d,e,f)
}
- 2D的转换是由一个3*3的矩阵表示的，前两行代表转换的值，分别是 a b c d e f ，要注意是竖着排的，第一行代表的是X轴变化，第二行代表的是Y轴的变化，第三行代表的是Z轴的变化，2D不涉及到Z轴，这里使用 0 0 1
缩放scale(x,y)
- 缩放对应的是矩阵中的a和d，x轴的缩放比例对应a,y轴的缩放比例对应d。
transform:scale(x,y)
a = x
d = y
- 所以scale(1.5, 2)对应的矩阵是
matrix:(1.5,0,0,0,2,0)
- 默认的话a=d=1 记住缩放是对角线
平移 translate(10, 20)
- 平移对应的是矩阵中 e 和 f，平移的x 和 f分别对应 e 和 f
transform:translate(10, 20)
e = 10
f = 20
-
对应：
transform: matrix(a, b, c, d ,10, 20); -
结合缩放：
transform: matrix(1.5 0, 0, 2, 10, 20) -
这里的ef就是矩阵的最右边的值
旋转 rotate(0deg)
- 旋转影响的是a/b/c/d四个值，分别是什么呢？
transform: rotate(θdeg)
a=cosθ
b=sinθ
c=-sinθ
d=cosθ
-
如果要计算 30° 的sin值：
-
首先我们要将 30° 转换为弧度，传递给三角函数计算。用 JS 计算就是下面的样子了。
// 弧度和角度的转换公式：弧度=π/180×角度
const radian = Math.PI / 180 * 30 // 算出弧度
const sin = Math.sin(radian) // 计算 sinθ
const cos = Math.cos(radian) // 计算 cosθ
console.log(sin, cos) // 输出 ≈ 0.5, 0.866
transform: rotate(30deg)
a=0.866
b=0.5
c=-0.5
d=0.866
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
偏移 skew(20deg, 30deg)
- 上面的题目中没有出现出现偏移值，偏移值也是由两个参数组成，x 轴和 y 轴，分别对应矩阵中的 c 和 b。是 x 对应 c，y 对应 b， 这个对应并不是相等，需要对 skew 的 x 值 和 y 值进行 tan 运算。
transform: skew(20deg, 30deg);
b=tan30°
c=tan20°
注意 y 对应的是 c，x 对应的是 b。
transform: matrix(a, tan(30deg), tan(20deg), d, e, f)
- 使用 JS 来算出 tan20 和 tan30
// 先创建一个方法，直接返回角度的tan值
function tan (deg) {
const radian = Math.PI / 180 * deg
return Math.tan(radian)
}
const b = tan(30)
const c = tan(20)
console.log(b, c) // 输出 ≈ 0.577, 0.364
b=0.577 c=0.364
transform: matrix(1, 0.577, 0.364, 1, 0, 0)
旋转+缩放+偏移+位移
- 如果我们既要旋转又要缩放又要偏移，我们需要将旋转和缩放和偏移和位移多个矩阵相乘，要按照transform里面rotate/scale/skew/translate所写的顺序相乘。 这里我们先考虑旋转和缩放，需要将旋转的矩阵和缩放的矩阵相乘