html+css3实现骰子
1、效果
2、html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dice game</title>
<link rel="stylesheet" type="text/css" href="css/main.less">
</head>
<body>
<div class="container">
<ul class='cube'>
<li class='slide front n1'>
<span></span>
</li>
<li class='slide back n6'>
<p>
<span></span>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
<span></span>
</p>
</li>
<li class='slide left n5'>
<p>
<span></span>
<span></span>
</p>
<p><span></span></p>
<p>
<span></span>
<span></span>
</p>
</li>
<li class='slide right n3'>
<span></span>
<span></span>
<span></span>
</li>
<li class='slide top n4'>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li class='slide bottom n2'>
<span></span>
<span></span>
</li>
</ul>
</div>
<script type="text/javascript" src='js/jquery-2.2.1.min.js'></script>
<script type="text/javascript" src='js/main.js'></script>
</body>
</html>
3、css代码
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: fixed;
top: 0%;
left: 0%;
border-radius: 50px;
}
.cube {
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 0;
line-height: 400px;
text-align: center;
transform-style: preserve-3d;
font-size: 50px;
cursor: pointer;
transition: all 0.3s ease-in-out;
animation: demo 1s alternate infinite;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid gray;
border-radius: 50px;
top: 0;
left: 0;
color: red;
background: white;
}
span {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
background-color: blue;
box-shadow: inset 0 0 50px 3px rgba(0, 0, 0, 0.5);
}
.front {
transform: translateZ(200px);
}
.n1 span {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: red;
margin: 0 auto;
vertical-align: middle;
box-shadow: inset 0 0 100px 3px rgba(0, 0, 0, 0.5);
}
.bottom span {
text-align: center;
}
.left span {}
.top span {}
.n5 p {
display: block;
width: 360px;
height: 100px;
margin: 20px;
&:nth-child(1) {
span:nth-child(1) {
float: left;
}
span:nth-child(2) {
float: right;
}
}
&:nth-child(2) {
margin: 0 0 0 150px;
}
&:nth-child(3) {
span:nth-child(1) {
float: left;
}
span:nth-child(2) {
float: right;
}
}
}
.n2 span {
float: left;
&:nth-child(1) {
margin: 150px 50px 0 100px;
}
&:nth-child(2) {
margin: 150px 0 0 0;
}
}
.n6 p {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 50px auto 50px auto;
}
.n6 span {
float: left;
}
.back {
transform: translateZ(-200px) rotateY(180deg);
}
.left {
transform: rotateY(90deg) translateZ(200px);
}
.n3 span {
width: 100px;
height: 100px;
}
.n4 span {
float: left;
margin: 50px;
}
.right {
transform: rotateY(-90deg) translateZ(200px);
}
.top {
transform: rotateX(-90deg) translateZ(200px);
}
.bottom {
transform: rotateX(90deg) translateZ(200px);
}
@keyframes demo {
from {
top: 0;
left: 0;
transform: rotateX(0deg) rotateY(0deg);
}
to {
top: 600px;
left: 1000px;
transform: rotateX(360deg) rotateY(360deg);
}
}
4、总结：
存在间隙
