<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style media="">
#webkits{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
}
#boxA{
margin:150px auto;
width:300px;
height:300px;
position:relative;
-webkit-transform-style:-webkit-preserve-3d;
}
.box{
position:absolute;
width:300px;
height:300px;
font-size:150px;
color:#fff;
text-align:center;
line-height:300px;
border:1px solid #fff;
-webkit-transition: -webkit-transform 1s linear;
}
.box1{
background:#333; z-index:111;
}
.box2{
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
background:#333;
}
.box3{
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
background:#333;
}
.box4{
-webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
background:#333;
}
.box5{
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
background:#333;
}
.box6{
-webkit-transform: translateZ(-300px);
background:#333;
z-index:-1;
}
#op{
margin:0 auto;
font-size:16px;
font-weight:bold;
width:800px;
}
#op .range-control{width:721px;}
</style>
<script type="text/javascript">
function rotate(){
var x = document.getElementById("rotatex").value;
var y = document.getElementById("rotatey").value;
var z = document.getElementById("rotatez").value;
document.getElementById('boxA').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";
document.getElementById('degx-span').innerText = x;
document.getElementById('degy-span').innerText = y;
document.getElementById('degz-span').innerText = z;
}
</script>
</script>
</head>
<body>
<div id="webkits">
<div id="boxA">
<div class="box1 box">1</div>
<div class="box2 box">2</div>
<div class="box3 box">3</div>
<div class="box4 box">4</div>
<div class="box5 box">5</div>
<div class="box6 box">6</div>
</div>
</div>
<div id="op">
<p>rotate x: <span id="degx-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onchange="rotate()" /><br/>
<p>rotate y: <span id="degy-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onchange="rotate()" /><br/>
<p>rotate z: <span id="degz-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onchange="rotate()" /><br/>
</div>
</body>
</html>
