Rise Vision Blog

Product News, Customer Stories and Updates from Rise Vision

Give Your Presentations Some Perspective!

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.

Weekly Newsletter

Join 25,000+ members of the Rise Vision Community. Sign up to receive Rise Vision’s latest news and stories straight to your inbox every week.