当我使用.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