效果不出來
<!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>
2016-04-24
看下是不是瀏覽器兼容性問題，我也是剛學(xué)，不是很會
2016-04-16
#six{-webkit-transform:rotateZ(-200px);}將這行代碼換成-webkit-transform: translateZ(-200px);試試