將第6面的數(shù)字弄成正向的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
? #box{
?-webkit-perspective:800px;
?-webkit-perspective-origin:50% 50%;
? }
? #move{
?position:relative;
?width:340px;
?height:340px;
?margin:100px auto;
?-webkit-transform-style:preserve-3d;
? }
? .page{
?width:300px;
?height:300px;
?color:white;
?padding:20px;
?background:black;
?font-weight:bold;
?font-size:300px;
?line-height:300px;
?text-align:center;
?position:absolute;
? }
? #page1{-webkit-transform:translateZ(170px);}
? #page2{-webkit-transform-origin:right;-webkit-transform:rotateY(90deg) translateX(170px);}
? #page3{-webkit-transform-origin:left;-webkit-transform:rotateY(-90deg) translateX(-170px);}
? #page4{-webkit-transform-origin:bottom;-webkit-transform:rotateX(-90deg) translateY(170px);}
? #page5{-webkit-transform-origin:top;-webkit-transform:rotateX(90deg) translateY(-170px);}
? #page6{-webkit-transform:rotateX(180deg) translateZ(170px);}
? ?#op{
? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? font-size:16px;
? ? ? ? ? ? font-weight:bold;
? ? ? ? ? ? width:800px;
? ? ? ? }
? ? ? ? #op .range-control{width:721px;}
</style>
</head>
<body>
<div id="box">
? <div id="move">
? ? <div class="page" id="page1">1</div>
? ? <div class="page" id="page2">2</div>
? ? <div class="page" id="page3">3</div>
? ? <div class="page" id="page4">4</div>
? ? <div class="page" id="page5">5</div>
? ? <div class="page" id="page6">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>
<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('move').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>
</body>
</html>
