jquery - html5视频透视变换

Question

是否可以通过 CSS 或 jquery 视频透视设置以准确适合我需要的位置和方式？

看图:

我希望视频适合红色区域。

提前致谢!

Answer 1

是的，这是可能的。您需要熟悉 CSS3 transform 和 perspective 属性。

.video-wrapper {
  perspective: 1000px;
}
video {
  transform: rotateY(-30deg);
}

<div class="video-wrapper">
  <video width="400" controls>
    <source src="http://www.w3schools.com/HTML/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/HTML/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

无需经过所有努力来创建解决方案，您可以使用 HTML5 canvas 元素