如何将平方变换为等腰梯形？

Question

我有一个200 * 200像素的div，我想将它转换为Isosceles Trapezoid，其中基数和高度仍为200px，但a侧应为100px。

Isosceles Trapezoid http://mathworld.wolfram.com/images/eps-gif/IsoscelesTrapezoid_900.gif

原始方块为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