首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> 
<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>
<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>;
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

代码编辑器：

运行结果：