To set the bottom position of 3D elements, use the JavaScript perspectiveOrigin property.
Example
You can try to run the following code to set the bottom position of 3D elements with JavaScript. We have three divs in the code −
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 200px;
width: 200px;
padding: 20px;
border: 2px solid blue;
perspective: 100px;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateX(45deg);
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid BLUE;
background-color: green;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<p>Change the property of div</p>
<button onclick = " display ()">Set Perspective Origin Position</button>
<div id = "div1">DIV1
<div id = "div2">DIV2</div>
<div id = "div3">DIV3</div>
</div>
<script>
function display() {
document.getElementById("div1").style.perspectiveOrigin = "20px 10%";
}
</script>
</body>
</html>