CSS 3D变换以使给定边长成为梯形 [英] CSS 3D transform to make trapezoid of given edge lengths

问题描述

我有一个给定尺寸的元素（例如100x300 px）生活在一个高度和可变宽度相同的容器中，我想使用 rotateX 围绕 -webkit-transform-origin：顶部居中； ，同时选择容器的 -webkit-perspective ，以便图像的底线保持原样，但只能扩展以填充整个容器。

哇，听起来很混乱。这是一张图片：

所以基本上，我想创建一个梯形，其上部宽度固定，下部宽度可变。但是，我不太清楚这种关系背后的数学原理。欢迎使用Javascript。如果主体的宽度为600px，以下示例将起作用：

I have an element of given dimensions (say, 100x300 px) living in a container of the same height and variable width that I want to transform using rotateX around -webkit-transform-origin: top center; while picking the -webkit-perspective of the container so that it appears that the bottom line of the image stays where it is but only expands to fill the entire container.

Wow, that sounds confusing. Here's a picture:

So basically, I want to create a trapezoid with a fixed upper width and a variable lower width. I can't however quite figure out the math behind the relations... Javascript welcome. Following example works IF the body is 600px wide: http://jsfiddle.net/24qrQ/

Now the task is to change the perspective and rotation continuously with the body width. Any Ideas?

解决方案

Okay, after a glass of wine the maths came back to me:

First, let's look at the perspective / rotation ratio. Viewed from the side, it looks like this:

The red element is rotated around its upper edge, if we project its lower edge to the lower edge of the container, the intersection between the projection line and the line perpendicular to the container at its upper edge is the required viewpoint. We get this by simple trigonometry (notice phi here is in radians, not in degree).

If we apply this, the lower edge of the element will always appear on the lower edge of the container. Now the free parameter is rotation. This seems to have the relation

rad = pi/2 - element.width / container.width

for sufficiently large widths, however I can't quite wrap my head around the actual relationship. Here is a fiddle: http://jsfiddle.net/24qrQ/6/

这篇关于CSS 3D变换以使给定边长成为梯形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！