如何仅将倾斜转换为底角？ [复制]答案

【问题标题】：How to transform skew only towards bottom corners? [duplicate]如何仅将倾斜转换为底角？ [复制]
【发布时间】：2020-07-06 17:37:38
【问题描述】：

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

正常：

变身：

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

【问题讨论】：

标签： css transform css-transforms

【解决方案1】：

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

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

&lt;div id='trapezium'&gt;&lt;/div&gt;

【讨论】：

这个有一个角。我需要两个角（左下角，右下角）。
立即查看！我已经更新了我的代码。
我需要转型。
你的意思是设计应该是翻转的？小边应该在底部？
是的，但是有转换技巧。（您在演示中显示的内容是正确的，但我需要与转换 css 相同的效果）

【解决方案2】：

您可以使用perspective 和transform: rotateX(-45deg); CSS 属性获得类似的输出，这是一个有效的 sn-p：

.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>

【讨论】：

这就是我要找的。但是你所说的transformY是什么意思？啊，不能只对一个div做吗？
对不起，我的意思是 rotateX() 会更新我的答案。