perspectiveOrigin Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:perspectiveOrigin

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

Description

The perspectiveOrigin property sets the origin of a 3D element in x/y axis.

Property Values

Value Description
x-axis where view is placed at the x-axis Possible values: left, center, right, length, %. Default value: 50%
y-axis where view is placed at the y-axis Possible values: top, center, bottom, length, %. Default value: 50%
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 50% 50%
Return Value: A String, representing the perspective-origin property of an element
CSS VersionCSS3

Set a 3D element's base placement:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {/* ww w .  j  a  v  a  2 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">This is a test. This is a test. This is a test.</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