为何用-1倍单位矩阵在CSS中呈现单应变换的‘背面’？

首先明确核心逻辑：

• 你用的k值0至0.02的单应变换属于透视畸变变换，当k>0.01时，正方形右侧会因透视参数过大产生空间折叠效果，此时需要对应“翻转后的视觉内容”来模拟所谓的“背面”。
• 这个-1倍单位矩阵（即matrix3d(-1,0,0,0, 0,-1,0,0, 0,0,-1,0, 0,0,0,1)）的作用是对内层元素做三维中心反演变换——简单说就是把内层内容以自身中心为原点，做了x、y、z轴全反转的点对称翻转。

具体实现原理： #

1. 初始单层正方形的情况下，单应变换只会对正面内容做透视畸变。当k超过阈值引发空间折叠时，折叠区域没有对应的“背面”视觉内容（元素本身只有正面样式），所以看不到预期的灰色背面。
2. 添加内层div并应用-1倍单位矩阵后，内层内容被预先翻转。当外层单应变换导致右侧空间折叠时，这个翻转后的内容刚好填充到折叠区域，视觉上就呈现出“背面从右侧显现”的效果。

和CSS backface-visibility的区别： #

backface-visibility是控制元素绕3D轴旋转后是否显示背面（比如元素旋转180度后，背面是否可见），依赖于元素的3D旋转属性。而你这里的“背面”是单应透视畸变产生的空间折叠效果，和旋转无关，因此必须通过预先翻转内层内容来模拟这个视觉效果，而非靠backface-visibility控制。

内容的提问来源于stack exchange，提问作者hbghlyj