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.

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

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

raja
Published on 23-Sep-2019 15:17:07
Advertisements