perspective Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:perspective

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. perspective

Description

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

Property Values

Value Description
length How far the element is placed from the view
noneDefault value. Same as 0. The perspective is not set
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the perspective property of an element
CSS VersionCSS3

Set the perspective from where an element is viewed:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {//from   w w  w.j av  a2 s . com
    position: relative;
    margin: auto;
    height: 150px;
    width: 250px;
    padding: 10px;
    border: 1px solid black;
    -webkit-perspective: 125px; /* Chrome, Safari, Opera */
    perspective: 125px;
}

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: coral;
    -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">Think that you are a bird, looking down on a wall. Then click the button to see what happens if the wall moves to the left!</div>
</div>

<script>
function myFunction() {
    document.getElementById("div1").style.WebkitPerspectiveOrigin = "10px 50%"; // Chrome, Safari and Opera
    document.getElementById("div1").style.perspectiveOrigin = "10px 50%";
}
</script>

</body>
</html>

Related Tutorials