transform:rotate() 将视频强制置于所有元素之上

Question

我有这个元素 (.tas-fullscreen)，它包含一个 .media-container 和一个 .content-container。媒体容器包含视频元素，内容容器包含文本。不旋转 .tas-fullscreen 元素时看起来不错，但是当我旋转它时，视频元素会自动放置在所有元素之上。文本元素应始终位于视频元素之上。

我尝试过在 .content-container 上使用高 z-index，在 .media-container 上使用低 z-index，但没有任何效果。

这是一个简单的例子

.tas-fullscreen{
    position: absolute;
    left: 0px;
    top:600px;
    overflow: hidden;
    z-index: 10;
    height: 300px;
    width: 600px;
    font-size: 46px;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    display: flex;
}

.media-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.media-content{
  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:10;
}

video{
  object-fit: cover;
  height: 100%;
  width:100%;
  z-index:0;
}

<div class="tas-fullscreen">
<div>
<div class="media-container">
<video class="video" autoplay="true" loop="" muted="" data-origwidth="0" data-origheight="0"><source src="https://theadstore.io/wp-content/uploads/2020/09/dcf3ca22-d06f-44d1-b140-b7fdbf7faffa.mp4" type="video/mp4"></video>
</div>
<div class="media-content">
<div class="heading">
This is the header
</div>
<div class="body">
This is the body
</div>
</div>
</div>
</div>

https://theadstore.io/?p=2232&a=niels

希望你能帮助我。

Answer 1

给定的 sn-p 在 Window10 上的 FireFox 上按预期/要求工作。它在 W10 的 Edge 上发挥了一定作用，因为文本出现在视频的顶部，但视频仅限于全高（300 像素）和相应的（自动）宽度 - 似乎没有注意到任何封面。在 IOS13 Safari 和 Chrome 上，视频翻转并占据了整个宽度和高度而没有失真（即封面似乎有效），但文本被隐藏了。这是问题中报告的最后一种现象。

因为感兴趣的是 Chrome，所以在此寻找并给出了一种有效的方法。它需要两个具有类 tas-fullscreen 的外部 div。第一个包含视频，并且 div 被赋予 z-index -1（z-index 0 或以上不起作用）。第二个包含文本并被赋予更高的 z-index。

<!DOCTYPE html>
<html>
<head>
<style>
.tas-fullscreen{
    position: absolute;
    left: 0px;
    top:600px;
    overflow: hidden;
    height: 300px;
    width: 600px;
    font-size: 46px;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    display: flex;
}

.media-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.media-content{
  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:10;
}

video{
  positon: absolute;
  object-fit: cover;
  height: 100%;
  width:100%;
}
</style>
</head>
<body>
<div class="tas-fullscreen" style="z-index:-1;">
<div>
<div class="media-container">
<video class="video" autoplay="true" loop="" muted="" data-origwidth="0" data-origheight="0"><source src="https://theadstore.io/wp-content/uploads/2020/09/dcf3ca22-d06f-44d1-b140-b7fdbf7faffa.mp4" type="video/mp4"></video>
</div>
</div>
</div>
<div class="tas-fullscreen" style="z-index:100;background-cyan:opacity:0.5;">
<div class="media-content">
<div class="heading">
This is the header
</div>
<div class="body">
This is the body
</div>
</div>
</div>
</body>
</html>

这个 sn-p 已经在 W10 的 Chrome 和 FF 上进行了测试，并且似乎可以工作。它在 Edge 上工作，除了视频不包含，它包含。 sn-p 也在 iPadIOS13 上的 Safari 和 Chrome 上进行了测试，似乎可以正常工作。