Start Free Trial
Rise Vision Blog

Product News, Customer Stories and Updates from Rise Vision

Give Your Presentations Some Perspective!

2 rectangles, one is rotated 45 degrees on the X Axis and the other on the Y Axix

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:

Webkit Transform Rotate X and Y 45 Degrees Example

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.

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.

Keep your displays interesting - pick new templates every week!

Every week, we send Template recommendations that will make you look great and improve your audience experience. And the best part, they save up to 16 hours of content creation time every week.

Not convinced? Check out the email we sent last week.