<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>骰子</title>
<style type="text/css">
.sbing{
-webkit-perspective: 800;
-webkit-perspective: 50% 50%;}
#cube{
-webkit-transform-style: preserve-3d;
position: relative;
width: 200px;
height:200px;
margin: 100px auto; }
.page{
position: absolute;
width: 160px;
line-height: 160px;
text-align: center;
font-size: 200px;
color: #ff0;
padding: 20px;
background: #00f;}
#page1{
background: #ddbdff; }
#page2{
background: #bc1339;
-webkit-transform-origin: left;
-webkit-transform: rotateY(90deg);}
#page3{
background: #a369af;
-webkit-transform-origin: right;
-webkit-transform: rotateY(-90deg); }
#page4{
background: #032149;
-webkit-transform-origin: top;
-webkit-transform: rotateX(-90deg); }
#page5{
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(90deg); }
#page6{
background: #838b75;
-webkit-transform: translateZ(-200px); }
.operation{
width: 800px;
margin: 30px auto; }
.operation .centeral{
width: 720px; }
button{
display: block;
width: 100px;
height: 60px;
text-align: center;
font-size: 16px;
margin: 20px auto; }
</style>
<script type="text/javascript">
window.onload = function(){
var cube = document.getElementById("cube");
var btn = document.getElementById("btn");
var reset = document.getElementById("reset");
var z = Math.random()*4020;
var x = Math.random()*4020;
var y = Math.random()*4020;
btn.onclick = function(){
cube.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)"
cube.style.webkitTransition = "-webkit-transform 7s ease";
}
reset.onclick = function(){
cube.style.webkitTransform = "rotateX("+0+"deg) rotateY("+0+"deg) rotateZ("+0+"deg)"
cube.style.webkitTransition = "none";
}
}
</script>
</head>
<body>
<div class="sbing">
<div id="cube">
<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>
<button id="btn">点击旋转</button>
<button id="reset">点击复位</button>
</body>
</html>
时间： 2024-08-07 17:14:17