The perspective
property is used to activate the threedimensional space on an element so that its children can be positioned in that space.
It allows you to add a feeling of depth to a scene, by making elements higher on the zaxis (closer to the viewer) appear larger, and those further away to appear smaller.
Without specifying a perspective, an element that is transformed using a threedimensional transform function will look flat and twodimensional.
The perspective
property is used in conjunction with CSS transforms. It takes either a length value or the keyword none
. The use of this property with any value other than none
establishes a stacking context. It also establishes a containing block (somewhat similar to <a href="http://tympanus.net/codrops/css_reference/position">position</a>: relative
), just like the transform
property does.
The following image shows the result of transforming (rotating) an element in threedimensional space with and without a perspective specified.
perspective
vs perspective()
When you have an element that you want to transform in threedimensional space, you can activate that space using the perspective property on its parent, or using the perspective()
function on the transformed element itself. So what is the difference between these two ways? and when would you want to use one and not the other?
Both the perspective
property and the perspective()
function are used to give elements depth by making an element higher on the zaxis (closer to the viewer) appear larger, and an element further away to appear smaller. The smaller the value, the closer the zpane is from the viewer, and the more impressive the effect; the higher the value, the farther the element is from the screen and the more subtle the effect is.
When you apply a perspective to an element using the perspective()
function (see the transform
property entry for details on how that works), you’re activating the threedimensional space on that element only. The perspective
property, on the other hand, is useful when you want to activate the threedimensional space on an element that has several children that are all transformed using threedimensional transforms. Both the property and the functional notation trigger a threedimensional space.
The functional notation is convenient when applying a threedimensional transform on a single element. But when you have multiple transformed elements inside a container, if each one of them has a perspective set on it using the perspective()
function, the elements don’t line up as expected. This is because each of them has its own threedimensional space and therefore its own vanishing point.
By default, the vanishing point for a 3D space is positioned at the center. (It can be changed using the perspectiveorigin
property.) If the elements don’t share the same threedimensional space, each of them will have a vanishing point of its own. So, using perspective()
will result in each element having its own space and therefore its own vanishing point. In order to avoid this and allow the elements to line up, they should share the same space. By using the perspective
property on the container, a threedimensional space is created that is shared by all its children.
The following image shows the result of triggering a threedimensional space on a container whose children are rotated in that space (left), and the reuslt of triggering a threedimensional space on each item using the perspective()
function (right):
Official Syntax

Syntax:
perspective: none  <length>
 Initial: none
 Applies To: transformable elements
 Animatable: yes, as a length
Values
 none
 No perspective is applied and thus no threedimensional space is triggered.
 <length>

Specifies the assumed distance between the viewer and the z=0 plane. It is used to calculate a perspective matrix used to apply a perspective transform to an element and its content. If it is set to zero no perspective is applied. Negative values are not allowed. See the
<length>
entry for a list of possible values.
Examples
The following sets a perspective on an element whose children are transformed in the threedimensional space triggered by the perspective
property:
.container { perspective: 1800px; } .container .child { float: left; margin: 50px; transform: translateZ(50px) rotateY(45deg); }
Live Demo
The perspective of an element can be visualized best on a threedimensional shape such as a cube, for example.
In this demo, three identical cubes are present, all with the same transformations. Each of them has a different perspective set. Try changing the values of the perspective to see how the depth of the scene changes.
The higher the perspective value, the less intense the effect, and the lower the perspective value, the more intense the effect is.
View this demo on the Codrops PlaygroundBrowser Support
CSS3 3D Transforms
Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in zspace and the `backfacevisibility` property to toggle display of the reverse side of a 3Dtransformed element.
W3C Working Draft
Supported from the following versions:
Desktop
 36
 16
 10
 23
 15
Mobile / Tablet
 15
 117
 No
 117
 117