Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Style perspective Property


The HTML DOM Style perspective property returns and modify how 3D elements are viewed in an HTML document.

Syntax

Following is the syntax −

1. Returning perspective

object.perspective

2. Modifying perspective

object.perspective = “value”

Here, value can be −

ValueExplanation
InitialIt set this property value to its default value.
inheritIt inherits this property value from its parent element.
NoneIt sets no perspective.
lengthIt specifies how far the element is placed from the view in terms of length units.

Let us see an example of HTML DOM Style perspective Property −

Example

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .box {
      text-align: center;
      width: 200px;
      height: 200px;
      background-color: #db133a;
      transform: rotateX(25deg);
      margin: 2rem auto;
   }
</style>
<body>
<h1 style="text-align:center">DOM Style perspective Property Demo</h1>
<div class='box'></div>
<button class="btn" onclick="set()">Set Perspective</button>
<script>
   function set() {
      document.body.style.perspective = "100px";
   }
</script>
</body>
</html>

Output

HTML DOM Style perspective Property

Click on “Set Perspective” button to set perspective of red box.

HTML DOM Style perspective Property