Javascript Reference - HTML DOM Style perspectiveOrigin Property








The perspectiveOrigin property defines where a 3D element is based in the x- and the y-axis.

We can use this property to change the bottom position of 3D elements.

Browser Support

perspectiveOrigin Yes (WebkitPerspecitveOrigin) 10 Yes Yes (WebkitPerspecitveOrigin) Yes (WebkitPerspecitveOrigin)

Syntax

Return the perspectiveOrigin property:

var v = object.style.perspectiveOrigin;

Set the perspectiveOrigin property:

object.style.perspectiveOrigin='x-axis y-axis|initial|inherit'




Property Values

Value Description
x-axis where to place the view at the x-axis

Possible values:

  • left
  • center
  • right
  • length
  • %

Default value: 50%
y-axis where to place the view at the y-axis

Possible values:

  • top
  • center
  • bottom
  • length
  • %

Default value: 50%
initial Set to default value
inherit Inherit from parent element.

Technical Details

Default Value: 50% 50%
Return Value: A string representing the perspective-origin property of an element
CSS Version CSS3




Example

The following code shows how to set a 3D element's base placement.


<!DOCTYPE html>
<html>
<head>
<style>
#div1 {<!--from   ww w  .j  a  va2s  . co m-->
    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">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>

The code above is rendered as follows: