Javascript Reference - HTML DOM Style perspective Property

The perspective property defines how many pixels a 3D element is placed from the view.

Browser Support

Chrome, Safari, and Opera support an alternative, the property.


`Style perspective`	Yes (WebkitPerspective)	10	Yes	Yes (WebkitPerspective)	Yes (WebkitPerspective)

Syntax

Return the perspective property:

var v = object.style.perspective

Set the perspective property:

object.style.perspective='length|none'

Property Values

Value	Description
length	Use length unit to set the distance
none	Default value. Same as 0. The perspective is not set
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	none
Return Value:	A string representing the perspective property
CSS Version	CSS3

Example

The following code shows how to set the perspective from where an element is viewed.


<!DOCTYPE html>
<html>
<head>
<style>
#div1 {<!--from  www  .  ja  v  a 2  s . co  m-->
    position: relative;
    margin: auto;
    height: 250px;
    width: 200px;
    padding: 10px;
    border: 1px solid red;
    -webkit-perspective: 200px; /* Chrome, Safari, Opera */
    perspective: 200px;
}

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    -webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
    transform: rotateX(45deg);
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="div1">DIV1<div id="div2">test!</div></div>
<script>
function myFunction() {
    document.getElementById("div1").style.WebkitPerspective = "100px"; // Chrome, Safari and Opera
    document.getElementById("div1").style.perspective = "100px";
}
</script>

</body>
</html>

The code above is rendered as follows: