Html 视频z-index变换旋转异常行为

我有一场戏。

画布上有各种组件。有
视频
，
图片
和常见的
材料

如下图所示，
视频
（黑色）将阻止下面的图像，但图像的“z索引”为2，高于视频的“z索引”为1


#根{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.css包装{
位置：相对位置；
宽度：100%；
身高：100%；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：居中；
对齐项目：居中；
}
.css轮换{
位置：相对位置；
宽度：211px；
身高：375px；
变换：旋转（90度）；
}
.css图片{
/*背面可见性：隐藏*/
位置：绝对位置；
显示：块；
z指数：2；
左：43.07px；
顶部：175.78px；
宽度：124.8px；
身高：83.2px；
/*背景：红色*/
}
.css视频{
位置：绝对位置；
显示：块；
z指数：1；
左：0px；
顶部：0px；
宽度：210.94px；
身高：375px；
背景：蓝色；
}
.css溢出{
溢出：隐藏；
位置：相对位置；
宽度：100%；
身高：100%；
颜色：rgb（0,0,0）；
}
.css高度{
身高：100%；
}
.css静态{
位置：静态；
宽度：100%；
身高：100%；
}
好了，只需将视频的
z-index
设置为
-1
，这样我就可以查看您的所有内容，并根据需要设置上述上下文
z-index

下面是更新的代码片段


#根{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.css包装{
位置：相对位置；
宽度：100%；
身高：100%；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：居中；
对齐项目：居中；
}
.css轮换{
位置：相对位置；
宽度：211px；
身高：375px；
变换：旋转（90度）；
}
.css图片{
位置：绝对位置；
显示：块；
z指数：2；
左：50%；
最高：50%；
宽度：124.8px；
身高：83.2px；
转换：翻译（-50%，-50%）；
}
.css视频{
位置：绝对位置；
显示：块；
z指数：-1；
左：0px；
顶部：0px；
宽度：210.94px；
身高：375px；
背景：蓝色；
}
.css溢出{
溢出：隐藏；
位置：相对位置；
宽度：100%；
身高：100%；
颜色：rgb（0,0,0）；
}
.css高度{
身高：100%；
}
.css静态{
位置：静态；
宽度：100%；
身高：100%；
}

谢谢你的建议。zindex-1确实可以解决这个问题。但不幸的是。这个演示是从实际项目中简化出来的，zindex for video在性能方面并不总是设置为-1，这是可以解决的。但这不能解决我的疑问。这是什么原因performance@Qyellow亲爱的z-index属性指定元素的堆栈顺序。堆栈顺序较高的元素始终位于堆栈顺序较低的元素前面。*注意：*z-index仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘滞）.这个解释是我考虑过的一种可能性。如上所述，小角度旋转（例如20或40）可以正常显示图片。这就是我要去的地方wonder@QyellowOpps我知道了这是你问题的答案，，，链接2会更精确在Fiferox上测试你的代码，你会得到你的答案，因为你不会有与Chrome相同的输出。这很可能是Chrome中的一个bug