效果不出来
<!DOCTYPE html>
<html>
<head>
<title>正方体</title>
<style>
html, body, div, span,
h1, h2, h3, h4, h5, h6, p
a, img, ol, ul, li
{
margin:0;padding:0;border:0;outline:0;
}
.cubebox{ -webkit-perspective:800px; -webkit-perspective-origin:50% 50%;}
.cube{position:relative;margin:150px auto;height:200px;width:200px;-webkit-transform-style:preserve-3d;}
.face{position:absolute;background-color:#000;color:#fff;font-size:180px;line-height:180px;text-align:center; height:180px;width:180px;padding:10px;-webkit-transition:-webkit-transform 1s linear;}
#one{}
#two{-webkit-transform-origin:right;-webkit-transform:rotateY(-90deg);}
#three{-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);}
#four{-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);}
#five{-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);}
#six{-webkit-transform:rotateZ(-200px);}
.btn{
margin:0 auto;
font-size:16px;
font-weight:bold;
width:800px;
}
.btn .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("cube").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>
</head>
<body>
<div class="cubebox">
<div class="cube">
<div class="face" id="one">1</div>
<div class="face" id="two">2</div>
<div class="face" id="three">3</div>
<div class="face" id="four">4</div>
<div class="face" id="five">5</div>
<div class="face" id="six">6</div>
</div>
</div>
<div class="btn">
<p>rotatex:<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>rotatey:<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>rotatez:<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>
