Html CSS:Skew&；轮换麻烦

我试图让左侧的红色div倾斜和旋转，使其与右侧的完全相同。然而，再多的倾斜、缩放、平移和旋转似乎都不能使其正确。这本质上是一个YouTube iframe，我想从一个角度播放

在旋转后的设计工具中，我必须缩放X轴，使其看起来像黑色矩形，这也很好。但我似乎找不到合适的偏移量使它看起来像这样

---

我想你在找。玩一玩透视图和旋转图，得到你满意的结果

.box{
宽度：18rem；
高度：10雷姆；
背景色：红色；
边界半径：1em；
变换：透视（50rem）旋转（-40度）
}

---

我想你在找。玩一玩透视图和旋转图，得到你满意的结果

.box{
宽度：18rem；
高度：10雷姆；
背景色：红色；
边界半径：1em；
变换：透视（50rem）旋转（-40度）
}

---

div需要绕Y轴旋转，您需要透视才能看到3D效果。不需要倾斜

比如：

#outerdiv{
宽度：100px；
高度：100px；
透视图：100px；
位置：相对位置；
顶部：100px；
}
#innerdiv{
宽度：100%；
身高：100%；
背景色：红色；
变换样式：保留-3d；
变换：旋转（-45度）；
}

---

div需要绕Y轴旋转，您需要透视才能看到3D效果。不需要倾斜

比如：

#outerdiv{
宽度：100px；
高度：100px；
透视图：100px；
位置：相对位置；
顶部：100px；
}
#innerdiv{
宽度：100%；
身高：100%；
背景色：红色；
变换样式：保留-3d；
变换：旋转（-45度）；
}

你能显示你已经拥有的HTML和css吗？你能显示你已经拥有的HTML和css吗？