Give Your Presentations Some Perspective!

November 15, 2011

You can do a lot of interesting things with CSS3. One of those things is to set the perspective from which an element is viewed, essentially giving an illusion of depth. The perspective property defines how many pixels a 3D element is placed from the viewer. The syntax looks like this:

-webkit-perspective: 500;

where 500 is the number of pixels from the viewer. The default is none, which means that the perspective is not set. When defining this property, it will only be applied to child elements, not to the actual element itself.

A complementary property is -webkit-perspective-origin, which specifies the x and y coordinates of the child elements. Here's what that looks like:

-webkit-perspective-origin: 50% 50%;

The default values are 50%, meaning that the perspective is from the center of the element. Again, this property is only applied to child elements of the one on which this property is defined.

Perspective affects transformed elements, so in order to achieve it, we need to apply a transform to the child elements. For my example, I am simply going to rotate 2 elements, one about the x axis and the other about the y axis:

-webkit-transform: rotateX(45deg);
-webkit-transform: rotateY(45deg);

The end result would look like this when applied to 2 images:



Note that the perspective properties are only available in Webkit browsers, which means they will work on our open source digital signage player, or when previewing in Chrome or Safari.

Get started with Rise Vision

Please be sure to leave us a comment on this post or in our forum if you have any questions on the use of these properties.