平移
C3中:
数学中:
a c e
b d f
0 0 1
矩阵向量的运动:
a c e x ax+cy+e
b d f * y = bx+dy+f
0 0 1 1 0+0+1
小结:只要把前面横着的a,c,e与后面竖着的x,y,1相乘再相加就可以了
x`= ax+cy+e
y`=bx+dy+f
x’和y’就是我们变换后的水平位置坐标和垂直位置坐标,现在我们想要把元素往x轴的正方向平移100,在y轴方向上不动
x’=ax+cy+e+100
y’=bx+dy+f
y轴的正方向平移100,在x轴方向上不动
x’=ax+cy+e
y’=bx+dy+f+100
元素同时往x轴正向和y轴正向移动100个
从式子可以得出CSS3的矩阵:
其他的数值不动,ef分别加100
transform: matrix(1,0,0,1,100,100)
总结:平移只有跟e和f有关系,e对应x轴的平移,f对应y轴的平移,往正方向平移多少单位就加上多少,反之则减去多少个。
缩放
平移就是x或者y加减一个常数来得到的,同样缩放与平移一样的思想,就是x和y发生了变化,式子上就是系数的变化
x放大2倍,y不变,就是x的系数增大2倍
x’=2ax+cy+e
y’=bx+dy+f
y放大2倍,x不变,就是y的系数增大2倍
x’=ax+cy+e
y’=bx+2dy+f
x和y都放大2倍,就是x和y的系数都增大2倍
CSS3矩阵:
transform:matrix(2,0,0,2,0,0)
结论:所以说缩放只有跟a和d有关系,跟其他数值都无关,a对应x轴缩放,d对应y轴缩放,缩放多少倍就乘以多少
旋转
旋转前的小方块:
顺时针旋转45°:顺时针旋转45°就相当于以正方形左下角为圆心,顺时针旋转45°
**sin45°,cos45°=0.707
数学矩阵:
cosθ -sinθ 0 x xcosθ-ysinθ+0
sinθ cosθ 0 * y = xsinθ+ycosθ+0
0 0 1 1 0+0+1
公式:
x’=xcosθ-ysinθ;
y’=xsinθ+ycosθ;
结论:
transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0);然后需要旋转多少度就计算出这个度数的cosθ,