做了个小骰子
LLeo小浩
2015-05-25 22:37
做了个小骰子 嘿嘿
1回答
-
- qq_策马奔腾_0
- 2016-03-21 09:28:10
<!DOCTYPE html>
<html>
<head>
<title>骰子</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.table{
width: 100%;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px;
background-color: #eee;
-webkit-perspective-origin:50% 50%;
-webkit-perspective: 800px;
}
.control{
position: relative;
top:100px;
left:500px;
}
.dice{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: all 1s ease-out;
}
.side{
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 20px;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 200px;
font-size: 100px;
font-weight: bold;
}
#side1{
-webkit-transform: translateZ(100px);
}
#side6{
-webkit-transform: translateZ(-100px);
}
#side2{
-webkit-transform: rotateX(90deg) translateZ(-100px);
}
#side4{
-webkit-transform: rotateX(-90deg) translateZ(-100px);
}
#side3{
-webkit-transform: rotateY(-90deg) translateZ(-100px);
}
#side5{
-webkit-transform: rotateY(90deg) translateZ(-100px) ;
}
</style>
</head>
<body>
<div class="table">
<div class="dice" id="dice">
<div class="side" id="side1">1</div>
<div class="side" id="side2">2</div>
<div class="side" id="side3">3</div>
<div class="side" id="side4">4</div>
<div class="side" id="side5">5</div>
<div class="side" id="side6">6</div>
</div>
</div>
<div class="control">
<button onclick="turn()">翻滚</button>
</div>
<script>
function getAngle() {
var angle = Math.ceil(Math.random()*8-4)*90;
return angle;
}
function turn(){
var dice = document.getElementById("dice"),
strAngel = "rotateX("+getAngle()+"deg) rotateY("+getAngle()+"deg) rotateZ("+getAngle()+"deg)";
dice.style.transform = strAngel;
}
</script>
</body>
</html>
CSS3 3D 特效
78571 学习 · 425 问题
相似问题