<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
<script>
function changePersp(value)
{
document.getElementById('div1').style.webkitPerspective=value;
document.getElementById('persp').innerHTML=value;
}
function changeOrgPersp()
{
var x=document.getElementById('operspx').value;
var y=document.getElementById('operspy').value;
document.getElementById('div1').style.webkitPerspectiveOrigin=x + '% ' + y + '%';
document.getElementById('opersp').innerHTML=x + "% " + y + "%";
}
</script>
</head>
<body onload="changePersp(200);updateOrigPerpective()">
<div id="div1">
<div id="div2">HELLO</div>
</div>
Change perspective:<br>
<input type="range" min="45" max="5000" value="200" onchange="changePersp(this.value)"><br>
webkit-perspective: <span id="persp"></span>;<br>
<br>
Change the Origins:<br>
X-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspx"><br>
Y-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspy"><br>
webkit-perspective-origin: <span id="opersp">50% 50%</span>;
</body>
</html>