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

给定的代码片段在 Window10 的 FireFox 上作为 expected/required 使用。它在 W10 的 Edge 上发挥了一定的作用，因为文本出现在视频的顶部，但视频被限制在全高（300 像素）和相应的（自动）宽度 - 似乎没有注意到封面。在 IOS13 Safari 和 Chrome 上，视频转动并占据了整个宽度和高度而没有失真（即封面似乎有效）但文本被隐藏了。问题中报告的就是最后一个现象。

由于 Chrome 很有趣，因此寻求并在此处给出了一种适用于该方法的方法。它需要两批外部 div 和 class tas-fullscreen。第一个包含视频并且 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>

此代码段已在 Chrome 和 W10 上的 FF 上进行了测试，似乎可以正常工作。它在 Edge 上工作，除了视频不涵盖，它包含在内。该代码段还在 Safari 和 Chrome iPadIOS13 上进行了测试，似乎工作正常。

transform:rotate() 强制视频在所有元素之上

transform:rotate() forces video on top of all elements

css

video

transform

rotation