Perspective property (perspective)

The perspective property provides perspective to 3D transformed element and controls the amount of foreshadowing, or in other words it lets you define the perspective on how a 3D element is being viewed.

Syntax:

selector {

perspective: length | none;

}

Values:

length; Defines the distance of an element to his view.
none; Ignores the property (same as 0 length). This is default value.
initial, inherit

The value is given in pixels that define how far an element is placed from the view.

The value must be greater than zero, with about 2000px appearing normal, 1000px being moderately distorted, and 500px being heavily distorted. The difference with the perspective property is that the transform function affects the element itself, whereas the perspective property affects the element’s children.

NOTE: The perspective property only affects transform functions after the transform rule has been specified, and it only works with the 3D transformations.

Example

The perspective property example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    height: 200px; width: 80%; margin: 10px; padding: 10px;
    border: 1px dashed #222; background-color:lightblue; color:blue;
    font-size:30px;
    perspective: 90px;
    /* ADD proprietary selectors if needed */
}
div div {
   height: 100px; margin-top:50px;
   background-color:blue; color:lightblue; 
   transform: rotateY(60deg);
   /* ADD proprietary selectors if needed */
}
</style>
</head>
  
<body>

<h3>Perspective property example with two nested boxes</h3>
<div>MAIN box
    <div>NESTED box
    </div>
</div>

</body>
</html>

›› go to examples ››

Perspective property (perspective)

Syntax:

Values:

Example

The perspective property example:

Comments

About

Contact

Get Connected