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
.