css - 正方形怎么变成等腰梯形？

Question

我有一个 200*200 像素的 div，我想将其转换为 Isosceles Trapezoid。 , base 和 height 仍然是 200px，但是 a side 应该是 100px。

_{(来自 MathWorld - A Wolfram Web 资源:wolfram.com)}

原来的正方形是200*200px。 h , 和 b sides 应该是 booth 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