CSS perspective Property
Definition and Usage
The perspective property defines the
distance between the user's viewpoint and the object.
The perspective property must be applied to
the parent element to affect its 3D-transformed children.
A low value, assumes that the user is close to the object, and creates a strong 3D effect. A high value, assumes that the user is far away from the object and creates a mild 3D effect.
Note: Without perspective,
any 3D transforms will look flat and two-dimensional!
Example
Create the 3D space to affect its 3D-transformed children:
.container1 {
perspective: 300px; /* Creates the 3D space */
}
.box1 {
transform: rotateY(45deg);
}
.container2 {
perspective: 2000px;
/* Creates the 3D space */
}
.box2 {
transform: rotateY(45deg);
}
Try it Yourself »
More "Try it Yourself" examples below.
CSS Syntax
perspective: length|none;
| Property Value | Description | Demo |
|---|---|---|
| length | How far the element is placed from the view | Demo ❯ |
| none | Default value. Same as 0. The perspective is not set | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Formal Definition
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.perspective="50px" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| perspective | 36 | 10 | 16 | 9 | 23 |
More Examples
Example
Create a cube and set different perspectives:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Try it Yourself »
Related Pages
CSS reference: perspective-origin property
CSS tutorial: CSS 3D Transforms
HTML DOM reference: perspective property
