HTML DOM Style perspective Property

HTMLDOMWeb DevelopmentFront End Technology

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


Following is the syntax −

1. Returning perspective


2. Modifying perspective

object.perspective = “value”

Here, value can be −

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 −


Live Demo

<!DOCTYPE html>
   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;
<h1 style="text-align:center">DOM Style perspective Property Demo</h1>
<div class='box'></div>
<button class="btn" onclick="set()">Set Perspective</button>
   function set() { = "100px";


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

Updated on 17-Feb-2021 06:05:55