首页 > 代码库 > 立体骰子（css3和js）
立体骰子（css3和js）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src=http://www.mamicode.com/‘jquery-3.0.0.min.js‘></script>"color: #000000">
body{
perspective: 500px;
background-color: skyblue;
}
#demo {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
transition: all 5s;
}
#demo .item{
width: 100%;
height: 100%;
list-style: none;
position: absolute;
padding: 0;
margin: 0;
display: flex;
border-radius: 30px;
background-color: whitesmoke;
}
li{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
margin: 5px;
}
.item:nth-child(1){
align-items: center;
justify-content: center;
transform: rotateY(0deg) translateZ(100px);
}
.item:nth-child(1) li{
width: 50px;
height: 50px;
}
.item:nth-child(2){
justify-content: space-between;
transform: rotateY(180deg) translateZ(100px);
}
.item:nth-child(2) li{
width: 40px;
height: 40px;
}
.item:nth-child(2) li:nth-child(2){
align-self: flex-end;
}
.item:nth-child(3){
justify-content: space-between;
transform: rotateY(90deg) translateZ(100px);
}
.item:nth-child(3) li{
width: 35px;
height: 35px;
}
.item:nth-child(3) li:nth-child(3){
align-self: flex-end;
}
.item:nth-child(3) li:nth-child(2){
align-self: center;
justify-content: center;
}
.item:nth-child(4) {
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
transform: rotateY(-90deg) translateZ(100px);
}
.item:nth-child(4) li{
width: 35px;
height: 35px;
margin: 20px;
}
.item:nth-child(5){
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
transform: rotateX(90deg) translateZ(100px);
}
.item:nth-child(5) li{
margin: 8px 15px;
}
.item:nth-child(5) li:nth-child(2){
margin-top: 85px;
}
.item:nth-child(6){
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
align-content: space-between;
transform: rotateX(-90deg) translateZ(100px);
}
.item:nth-child(6) li{
margin: 18px 20px;
}
input{
display: block;
width: 50px;
height: 40px;
margin: 0 auto;
}
</style>
<script>
$(function () {
$("#btn").click(function () {
var x = parseInt(Math.random()*3600);
var y = parseInt(Math.random()*3600);
$("#demo").css({ transform:‘rotateX(‘+x+‘deg) rotateY(‘+y+‘deg)‘})
})
})
</script>
</head>
<body>
<div id="demo">
<ul class="item">
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<input type="button" id="btn" value="http://www.mamicode.com/开始"/>
</body>
</html>
立体骰子（css3和js）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。