这个方法确实可以生成一个基本的梯形,但还有一个问题没有解决。当我们没有设置 transform-origin 属性时,应用变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转。因此,它的宽度会增加,它所占据的位置会稍稍下移,它在高度上会有少许缩减。
为了让它的尺寸更好掌握,我们可以为它指定 transform-origin: bottom; 当它在 3D 空间中旋转时,可以把它的底边固定住。高度上的缩水,可以通过 scaleY() 来弥补。