Playing with CSS transforms

In the graphic below, the part with a perspective distortion has been created with css transforms. It was used as an illustration for ChateauxCountry.com's new year greetings this past month.

To render the main layer I developed a script which displays basic shapes, in this case numbers, using hundreds of tiny photos. The result was then put out in a web view, allowing CSS styling to take action.

Here's an example of the styling I used:

<div style="width:300px;-webkit-perspective:500;">
  <div style="-webkit-transform:rotateX(27deg);background-color:grey;height:200px;">
    <p style="font-size:24px;color:white;text-align:center;padding-top:80px;">
      I like CSS transforms.
    </p>
  </div>
</div>

Example output:

Finally, I applied a scaling transformation -webkit-transform:scale(x) (where x is a number) to the parent div in order to adjust its size.

Related documents at W3C: 2D Transforms, 3D Transforms.