HTML and CSS Reference
the element is only 5% closer. A lower number of pixels applied to the perspective creates a greater visual im-
pact because the viewer appears to be closer to the elements onscreen.
Figure 13-1 A low number applied to perspective has a greater visual impact.
You can give perspective any unit of length as a value.
Initial value: 50% 50% | Inherited: No | Applies to: All elements with a display declaration relating to block, inline
or table | CSS3
Unprefixed browser support: IE 10+, Firefox 16+
Prefixed browser support: Firefox 10+, Chrome 12+, Safari 4+
Whereas perspective determines how far the viewer appears to be looking at a 3D element, perspective-
origin determines the appearance of the viewer's position. The initial value of 50% 50% means the viewer will
see a 3D element as if that viewer is looking at it straight on. The X and Y position will be in the middle.
Again, perspective-origin just sets up the 3D space for the elements within it, so alone it doesn't create any
visual representation. I demonstrate how it does affect elements in a moment when using the transform function,
perspective-origin takes two values, the X and Y positions, and can be given any length value; a percentage;
or the keywords left , center , right , top, and bottom . A percentage value of 0% 0% is the equivalent of
left top , 100% 100% is right bottom , and so on. If only one value is given, the second is assumed to be
transform and 3D Transform Functions