CSS进阶知识点--Transform坐标系统与CSS矩阵及扩展

Transform 与坐标系统

transform-origin 属性

允许你更改转换元素的位置

语法

transform-origin: x-axis y-axis z-axis

CSS3 矩阵

CSS3 中的矩阵指的是一个方法，书写为 matrix() 和 matrix3d()。

matrix 是元素 2D 平面的移动转换（transform），2D 变换矩阵为 3*3。

matrix3d 是元素 3D 的移动变换（transform），3D 变换则是 4*4 的矩阵

矩阵 matrix

transform: matrix(a, b, c, d, tx, ty)

注意书写方向是竖直方向

转换公式

x，y表示转换元素的所有坐标

image

image

image

镜像对称公式

matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0)

k 代表所要对称的斜率

CSS3 扩展属性

transform-style 属性

指定嵌套元素是怎样在三维空间中呈现

transform-style：flat(默认值) | preserve-3d

backface-visibility 属性

指定元素背面面向用户时是否可见

语法

backface-visibility: visible( 默认值 ) | hidden