如何将正方形变成等腰梯形？

Question

我有一个 200*200 px 的 div，我想将其转换为 Isosceles Trapezoid，其底边和高度仍为 200px，但 a 边应为 100px。

_{（来自 MathWorld - Wolfram 网络资源：wolfram.com）}

原来的正方形是200*200px。 h 和 b 边应为展位 200px，a 边应为 100px。

我尝试将倾斜、缩放和旋转结合起来，但我不知道如何管理它。也许我应该使用transform: matrix(n,n,n,n,n,n) 函数，但我真的不知道如何为这个项目制作转换矩阵。

Answer 1

可能是这样

div.transform {
  perspective: 400px;
  transform-origin: 100px 200px;

  width: 200px;
  height: 200px;

  display: inline-block;
  background-color: magenta;
}
div.transform img {
  transform-origin: 100px 200px 0;
  transform: rotate3d(1,0,0, 45deg) scale3d(1, 1.89, 1);
}

见Codepen