<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 17px;
}
#outerDiv{
margin: 50px;
background: #f69d3c;
perspective: 100px;
-webkit-perspective: 100px; /* Safari 4-8 */
perspective-origin: left;
-webkit-perspective-origin: left; /* Safari 4-8 */
}
#innerDiv{
background: #0066ff;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari 3-8 */
}
</style>
</head>
<body>
<h1>CSS perspective-origin Property</h1>
<div id="outerDiv">outerDiv
<div id="innerDiv">innerDiv</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("outerDiv");
function myFunction(){
x.style.perspectiveOrigin = "center";
x.style.WebkitPerspectiveOrigin = "center";
}
</script>
<p><strong>Note</strong>: Click on the button to change the 'perspective-origin' from left to center.</p> </body>
</html>