CSS3 `perspective` Property

Example

Set the angle from which an element is viewed:

div {
    perspective: 500px;
    -webkit-perspective: 500px; /* Safari and Chrome */
}

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 version that supported the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
perspective	36.0 <br>12.0 -webkit-	10.0	16.0 <br>10.0 -moz-	9.0 <br>4.0.3 -webkit-	23.0 <br>15.0 -webkit-

Property Definition and Usage

The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.

When defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself.

Note: The perspective property only affects 3D transformed elements.

Tip: Use the perspective-origin property together with perspective to change the bottom position of 3D elements.

Default value:	none
Inherited:	no
---	---
Version:	CSS3
---	---
JavaScript syntax:	`object.style.perspective="500px"`
---	---

Syntax

Value	Description
number	The distance between the element and the view, in pixels.
none	Default value. Same as 0. No perspective is set.

❮ Css3 Pr Flex Shrink Css3 Pr Border Image Width ❯

CSS3 perspective Property

Example

Browser Support

Property Definition and Usage

Syntax

CSS3 `perspective` Property