CSS3 perspective Property
Example
Sets the angle from which to view an element:
div
{
perspective: 500px;
-webkit-perspective: 500px; /* Safari and Chrome */
}
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -ms- or -moz- specify the first browser version that supported the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Attribute definition and usage instructions
Defines how many pixels a 3D element is from the view. This property allows you to change how 3D elements are viewed in perspective.
When the perspective property is defined, it applies to the child elements of an element, providing the perspective view rather than to the element itself.
Note:The perspective property only affects 3D transformed elements.
Tip:please withperspective-originUse this attribute together with the attribute, so that you can change the bottom position of the 3D element.
| Default value: | none |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.perspective=500 |
Syntax
perspective: number|none;
| Value | Description |
|---|---|
| number | The distance between the element and the view, in pixels. |
| none | Default value. Same as 0. No perspective is set. |