我有一个给定尺寸的元素(比如100x300像素),它位于高度相同但宽度可变的容器中,我想使用
哇,听起来很复杂。这里有一张图片:
所以基本上,我想创建一个梯形,具有固定的上宽度和可变的下宽度。然而,我无法弄清关系背后的数学... 欢迎使用Javascript。以下示例在body宽度为600px时有效: http://jsfiddle.net/24qrQ/
现在的任务是随着body的宽度连续改变透视和旋转。有任何想法吗?
rotateX
绕-webkit-transform-origin: top center;
旋转该元素,并选择容器的-webkit-perspective
,使其看起来底部线停留在原位,但仅扩展到填充整个容器。哇,听起来很复杂。这里有一张图片:
![Trapezoid tranformation](https://istack.dev59.com/GWz7I.webp)