Style perspective Property
Example
Set the perspective from which the element is viewed:
Try it Yourself »
Definition and Usage
The perspective property defines the distance between a 3D element and the view, in pixels. This property allows you to change the perspective at which the 3D element is viewed.
When the perspective property is defined for an element, its child elements get the perspective effect, not the element itself.
Note:The perspective property only affects 3D transformed elements!
Tip:Please use this property together withperspectiveOriginthe property, so that you can change the bottom position of the 3D element.
Browser Support
![]()
IE10+ and Firefox support the perspective property.
Chrome, Safari and Opera support another property that can replace this property, the WebkitPerspective property.
Syntax
Return the perspective property:
Set the perspective property:
Property Values
| Value | Description |
|---|---|
| length | The distance of the element from the view, in pixels. |
| none | Default value. Same as 0. No perspective is set. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | none |
|---|---|
| Return value: | A string representing the perspective property of the element. |
| CSS Version | CSS3 |
Related Articles
JavaScript Style Object:perspectiveOrigin Property
CSS Reference:perspective Property
Other Extensions
Style Object