The perspective property is used to activate the three-dimensional 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 z-axis (closer to the viewer) appear larger, and those further away to appear smaller.
Without specifying a perspective, an element that is transformed using a three-dimensional transform function will look flat and two-dimensional.
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 three-dimensional space with and without a perspective specified.
rotateY() function. The image on the left shows the result of applying the rotation with a perspective specified, and the image on the right shows the same transformation without a perspective. In the image on the right, the transformation looks flat and two-dimensional because no three-dimensional space is triggered.perspective vs perspective()
When you have an element that you want to transform in three-dimensional 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 z-axis (closer to the viewer) appear larger, and an element further away to appear smaller. The smaller the value, the closer the z-pane 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 three-dimensional space on that element only. The perspective property, on the other hand, is useful when you want to activate the three-dimensional space on an element that has several children that are all transformed using three-dimensional transforms. Both the property and the functional notation trigger a three-dimensional space.
The functional notation is convenient when applying a three-dimensional 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 three-dimensional 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 perspective-origin property.) If the elements don’t share the same three-dimensional 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 three-dimensional space is created that is shared by all its children.
The following image shows the result of triggering a three-dimensional space on a container whose children are rotated in that space (left), and the reuslt of triggering a three-dimensional 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 three-dimensional 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 three-dimensional 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 three-dimensional 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 z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.
W3C Working Draft
Supported from the following versions:
Desktop
- 36
- 16
- 10
- 23
- 15
Mobile / Tablet
- 15
- 131
- No
- 131
- 132
