Javascript DOM CSS Style perspective Property

Introduction

Set the perspective from where an element is viewed:

document.getElementById("myDIV").style.perspective = "50px";

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

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {/*from  w w w  . j  a  v  a2  s . c  o  m*/
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 1px solid black;
  perspective: 200px;
}

#div2 {
  padding: 50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  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.perspective = "100px";
}
</script>

</body>
</html>

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

This property allows you to change the perspective on how 3D elements are viewed.

When setting the perspective property for an element, the child elements get the perspective view, NOT the element itself.

The perspective property only affects 3D transformed elements!

Property Values

Value	Description
length	How far the element is placed from the view
none	`Default` 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.

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

Previous Next