0

我有一个应用了 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>

4

0 回答 0