如何仅向底角转换偏斜？

Question

我很困惑如何只改变一侧（顶部或底部）的角：

正常：

转换：

谁能帮我解决这个问题？在这里，顶角保持不变，底角发生了变化。我怎样才能做到这一点？

Answer 1

你可以从这样的东西开始，干净简单，没有多个 divs。

#trapezium {
  width: 200px;
  height: 100px;
  margin: 50px;
  transform: perspective(100px) rotateX(-45deg);
  background-color: gray;
}

<div id='trapezium'></div>

Answer 2

你可以使用 perspective 和 transform: rotateX(-45deg); CSS 属性得到类似的输出，这里是一个工作片段：

.scene {
  position: relative;
  left:100px;
  width: 200px;
  height: 200px;
  
  margin: 40px;
  /* perspective property */
  perspective: 400px;
}

.panel {
  width: 100%;
  height: 100%;
  background: blue;
  transform:  rotateX(-45deg);
}

<div class="scene">
  <div class="panel"></div>
</div>

如何仅向底角转换偏斜？

How to transform skew only towards bottom corners?

css

transform

css-transforms