当我使用
.video { transform: rotateX(-50deg);}
它所做的就是压缩视频,如下所示:

So it turns out I can't upload images yet.

但是该图像显示所有代码仅压缩它,因此它没有那么高。我以为应该使它看起来像this。我不太清楚,但是下面的代码有什么用吗?


<!DOCTYPE html>
<head>
<style>
body {
    margin: 0;
}
.video {
  transform: rotateX(-50deg);
}
</style>
</head>
<body>
<div class="video">
<iframe src="https://www.youtube.com/embed/8I1sQlRiJdY" style="border: 0; width: 100%; height: 900px">Brother, where are the iframes?  And oats.</iframe>
</div>
</div>
</body>
</html>


请注意,该视频不是实际的视频,我是从ip网络摄像头获得的,但是它可以正常工作,所以不必担心。

最佳答案

确实它确实在X轴上旋转,问题是您看不到很好的结果,将X更改为Y或Z并看到实际变化,挤压是在X轴上旋转的效果。

从另一个角度来看:

我在评论中对您的要求怎么说,您需要使用perspective css。
这里有个例子:

Link Jsfiddle

07-24 09:46
查看更多