Categories
JavaScript Web development

HTML DOM Style perspective property/ perspectiveOrigin Property

In my previous tutorial, you could learn about the CSS Perspective property and the CSS Perspective-origin property. You can make a step forward and define the 3d shape also using JavaScript by HTML DOM Style perspective property, and perspective-origin property.

HTML DOM Style Perspective property

HTML DOM Style Perspective Property

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 defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Note: The perspective property only affects 3D transformed elements!

Syntax:

object.style.perspective = "length|none"

Where:

length– how far the element is placed from the view

none- default value. Same as 0. The perspective is not set

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 200px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid red;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">Look at the text. The perspective of the text has been changed too. </div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspective = "100px";
}
</script>
</body>
</html>

Output:

HTML DOM Style PerspectiveOrigin Property

The perspectiveOrigin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

When defining the perspectiveOrigin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

Syntax:

object.style.perspectiveOrigin = "x-axis y-axis|initial|inherit"

Where:

x-axis– defining where the view is placed at the x-axis (left, center, right, lenght, %). Default value: 50%.

y-axis– defining where the view is placed at the y-axis (top, center, bottom, lenght, %). Default value: 50%.

initial- sets this property to its default value.

inherit- inherits this property from its parent element.

Example:

!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 125px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid green;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">Look at the text. The perspective of the text has been changed too.</div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspectiveOrigin = "10px 50%";
}
</script>
</body>
</html>

Output:

To see more examples of the perspective-property and 3d cube click here, here and here.

Enjoy coding!

Leave a Reply