魄竹 2018-02-13
【引言】
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform: rotate(30deg);
上面两句是等效的,这与线性代数有关
关于线性代数可以参考
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
matrix(a,b,c,d,e,f) 的参数拆成矩阵就是这样的
a c e b d f 0 0 1
旋转z轴θ度
x轴最后会与原点偏移,X轴上的点[x,0,0]的坐标都会变成 [cosθx,sinθx,0]
a c e [1,0,0] * b d f = [cosθ,sinθ,0] 0 0 1
y轴
a c e [0,1,0] * b d f = [-sinθ,cosθ,0] 0 0 1
z轴 没有动
a c e [0,0,1] * b d f = [0,0,1] 0 0 1
这样就可以反推矩阵的个个值
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->