CSS3 perspective Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The perspective CSS property defines the perspective from which all child elements of the object are viewed. It is typically determines the distance between the Z = 0 plane and the viewer in order to give the feel of depth to the 3D-positioned element. Each 3D element with Z > 0 becomes larger, while each 3D-element with Z < 0 becomes smaller.
The following table summarizes the usages context and the version history of this property.
| Default value: | none |
|---|---|
| Applies to: | Transformable elements |
| Inherited: | No |
| Animatable: | Yes. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the perspective property in action.
Example
Try this code ».container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px); /* Standard syntax */
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| length | A length value indicating the depth of the perspective. If it is 0 or negative, no perspective transform is applied. |
none |
No perspective transform has to be applied. This is default value. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element perspective property. |
Browser Compatibility
The perspective property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 3D Transforms.
Related properties: perspective-origin, backface-visibility, transform, transform-origin, transform-style.
