Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS 3D transform to make trapezoid of given edge lengths

CSS 3D transform to make trapezoid of given edge lengths


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:

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

Problem courtesy of: Manuel Ebert


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:

Solution courtesy of: Manuel Ebert


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS 3D transform to make trapezoid of given edge lengths


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription