在线运行代码 - 菜鸟教程

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(cainiaoplay.com)</title>
<style>#div1{
	position: relative;
	margin:auto;
	height: 150px;
	width: 250px;
	padding:10px;
	border: 1px solid black;
	perspective:125px;
	-webkit-perspective:125px; /* Chrome, Safari, Opera */
}
#div2{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: coral;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg); /* Chrome、Safari、Opera */
}
</style>
</head>
<body>

<p>点击“尝试一下”按钮，改变 DIV1 元素的 perspecive-origin 属性：</p>
<button onclick="myFunction()">尝试一下</button>
<div id="div1">DIV1
	<div id="div2">假设您是一只鸟，从上往下看墙面。然后点击按钮来看看如果墙面向左移动会发生什么！</div>
</div>
<script>
function myFunction(){
	document.getElementById("div1").style.perspectiveOrigin = "10% 50%";
	/* Safari 和 Chrome */
	document.getElementById("div1").style.WebkitPerspectiveOrigin = "10px 50%";
}
</script>

</body>
</html>
源代码

动行结果
