Javascript DOM CSS Style perspectiveOrigin Property

Introduction

Set a 3D element's base placement:

document.getElementById("myDIV").style.perspectiveOrigin = "10px 50%";

Click the button to change the perspective-origin property of the DIV1 element:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {/*from   ww w.  ja va2s .c  om*/
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 1px solid black;
  perspective: 125px;
}

#div2 {
  padding: 50px;
  position: absolute;
  border: 1px solid black;
  background-color: coral;
  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! This is a test! 
  This is a test! This is a test! This is a test! This is a test! 
  This is a test! This is a test! This is a test! This is a test! 
  This is a test! This is a test! This is a test! This is a test! </div>
</div>

<script>
function myFunction() {
  document.getElementById("div1").style.perspectiveOrigin = "10px 50%";
}
</script>

</body>
</html>

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

This property changes the bottom position of 3D elements.

When setting the perspectiveOrigin property for an element, the child elements are positioned, NOT the element itself.

Property Values

Value	Description
x-axis	where the view is placed at the x-axis Possible values: left center right length % Default value: 50%
y-axis	Defining where the 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.

The perspectiveOrigin property Default Value: 50% 50%

The perspectiveOrigin property returns a String representing the perspective-origin property of an element.

Previous Next