CSS：倾斜和旋转问题

【问题标题】：CSS: Skew & Rotate TroublesCSS：倾斜和旋转问题
【发布时间】：2020-10-08 09:26:57
【问题描述】：

我试图让左边的红色 div 倾斜并旋转到与右边的完全一样。然而，无论怎么倾斜、缩放、平移和旋转，似乎都无法做到正确。这本质上是一个我想以某个角度播放的 YouTube iframe。

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

【问题讨论】：

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

标签： html css

【解决方案1】：

我认为您正在寻找3D CSS transformations。与perspective 和rotateY 一起玩，以获得您满意的结果。

.box {
  width: 18rem;
  height: 10rem;
  background-color: red;
  border-radius: 1rem;  
  transform: perspective(50rem) rotateY(-40deg)
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

类似：

#outerdiv {
  width: 100px;
  height: 100px;
  perspective: 100px;
  position:relative;
  top:100px;
}
#innerdiv {
  width:100%;
  height:100%;
  background-color:red;
  transform-style: preserve-3d;
  transform: rotateY(-45deg);
}

<div id="outerdiv">
  <div id="innerdiv">
  </div>
</div>

【讨论】：