解决CSS3 transform导致video元素无法点击/聚焦的问题

在嵌套的3D变换容器中，Video元素的控件无法点击、无法聚焦，调整z-index和基础rotateY变换无效。相关代码结构如下：

<div style="overflow: hidden; pointer-events: auto; width: 1095px; height: 789px; perspective: 952.407px;">
  <div style="transform-style: preserve-3d; pointer-events: none; width: 1095px; height: 789px; transform: translateZ(952.407px) matrix3d(-0.999994, 0.000178028, -0.00348579, 0, 0, -0.998698, -0.0510059, 0, 0.00349033, 0.0510056, -0.998692, 0, 35.8949, 0.468229, 19.1121, 1) translate(547.5px, 394.5px);">
    <video controls="controls" src="https://www.w3schools.com/html/mov_bbb.mp4" id="xFrame" class="xFrame" style="border: 0px; position: absolute; pointer-events: auto; display: block; width: 1920px; height: 1080px; line-height: 1080px; transform: translate(-50%, -50%) matrix3d(-0.00390625, 0, 0, 0, 0, -0.00390625, 0, 0, 0, 0, -0.2, 0, 35.5661, 3.00001, 28.8209, 1);"></video>
  </div>
</div>

1. 移除中间容器的pointer-events: none #

父容器的pointer-events: none会阻断事件传递路径，即使Video元素设置了pointer-events: auto，在3D变换场景下浏览器也无法正确将事件路由到Video控件。修改中间容器的样式：

<div style="transform-style: preserve-3d; /* 移除 pointer-events: none */ width: 1095px; height: 789px; transform: translateZ(952.407px) matrix3d(-0.999994, 0.000178028, -0.00348579, 0, 0, -0.998698, -0.0510059, 0, 0.00349033, 0.0510056, -0.998692, 0, 35.8949, 0.468229, 19.1121, 1) translate(547.5px, 394.5px);">

2. 提升Video元素的3D层级 #

在Video的transform中增加translateZ(100px)（值可根据实际场景调整），确保它在3D空间中处于父容器的前方，避免被容器的变换遮挡点击区域：

<video controls="controls" src="https://www.w3schools.com/html/mov_bbb.mp4" id="xFrame" class="xFrame" style="border: 0px; position: absolute; pointer-events: auto; display: block; width: 1920px; height: 1080px; line-height: 1080px; transform: translate(-50%, -50%) translateZ(100px) matrix3d(-0.00390625, 0, 0, 0, 0, -0.00390625, 0, 0, 0, 0, -0.2, 0, 35.5661, 3.00001, 28.8209, 1);"></video>

3. 简化复杂Matrix3D变换（可选） #

如果不需要如此复杂的3D变换矩阵，建议拆分或简化参数。复杂矩阵可能导致元素的实际点击碰撞盒与视觉位置偏移，可通过浏览器开发者工具的"Layers"面板检查元素的3D层级和碰撞盒位置。

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