CSS perspective() Function
Example
Use perspective() to add some perspective for two cubes:
.cube1 {
font-size: 4em;
width: 2em;
margin:
1.5em auto;
transform-style: preserve-3d;
transform:
perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:
preserve-3d;
transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}
Try it Yourself »
Definition and Usage
The CSS perspective() function defines
the distance between the user and the z=0 plane.
The perspective() function is used within the
transform property.
| Version: | CSS Transforms Module Level 2 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| perspective() | 12 | 12 | 10 | 4 | 15 |
| perspective(none) | 97 | 97 | 93 | 15.4 | 83 |
CSS Syntax
perspective(length|none)
| Value | Description |
|---|---|
| length | Required. Specifies the distance from the user to the z=0 plane. none indicates no transformation |
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS rotate() function.
CSS reference: CSS rotate3d() function.
CSS reference: CSS rotateX() function.
CSS reference: CSS rotateY() function.
CSS reference: CSS rotateZ() function.
CSS tutorial: CSS 3D transforms.
