我有一个应用了 CSS 3D 变换的元素。在该元素内部是一个我想用作背景的视频,使用position: fixed
和object-fit: cover
。在不改变 DOM 的形状和不从容器中移除 3D 变换的情况下,如何确保固定位置的视频元素延伸到整个视口,而不是在变换后的父对象的边缘被截断?
#bgairplane {
display: block!important;
object-fit: cover;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
#container {
margin: 40px;
border: 1px solid red;
transform: translateY(0);
}
<div id="container">
<h1>Hello World</h1>
<video playsinline="" autoplay="" muted="" loop="" id="bgairplane" style="display:none;">
<source src="https://www.dropbox.com/s/1u09y4musotvjsp/In-The-Clouds.mp4?raw=1" type="video/mp4">
</video>
</div>