<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_537302_qv2v1ojc61.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<!--<div class="icon iconfont icon-tianjia"></div>-->
<div id="myDiv" style="width: 100px;height: 100px;background: red;"></div>
<div class="btn" onclick="clickIt()">点击掷骰子</div>
<div class="box" id="box">
<div class="part">1</div>
<div class="part">2</div>
<div class="part">3</div>
<div class="part">4</div>
<div class="part">5</div>
<div class="part">6</div>
</div>
</body>
<script>
function clickIt() {
var n = 2;
document.getElementById("box").style.animation = "move"+n+" 5s ease-out forwards";
/* Opera、Chrome 和 Safari */
document.getElementById("box").style.WebkitAnimation = "move"+n+" 5s ease-out forwards";
/* IE 9 */
document.getElementById("box").style.msAnimation = "move"+n+" 5s ease-out forwards";
}
</script>
</html>
#box{
position: relative;
width: 100px;
height: 100px;
margin: 200px auto;
transform-style: preserve-3d ;
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
@keyframes move1{
0%{
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
100%{
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
}
@keyframes move2{
0%{
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
100%{
transform:rotateX(160deg) rotateY(30deg) rotateZ(0deg);
}
}
@keyframes move3{
0%{
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
100%{
transform: rotateX(-20deg) rotateY(-30deg) rotateZ(90deg);
}
}
@keyframes move4{
0%{
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
100%{
transform: rotateX(160deg) rotateY(-60deg) rotateZ(90deg);
}
}
@keyframes move5{
0%{
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
100%{
transform: rotateX(70deg) rotateY(0deg) rotateZ(-60deg);
}
}
@keyframes move6{
0%{
transform:rotateX(-20deg) rotateY(-30deg) rotateZ(0deg);
}
100%{
transform: rotateX(-110deg) rotateY(0deg) rotateZ(-30deg);
}
}
.part{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 50px;
color: #fff;
position: absolute;
top:0px;
left: 0px;
transition: 1s ease;
}
.part .iconfont{
font-size: 20px;
color: #fff;
margin-right: 10px;
}
.box:hover .part{
opacity: 0.5;
border-radius: 25%;
}
/*上*/
.part:nth-child(1){
background: #f7a263;
transform: rotateX(90deg) translateZ(50px);
}
.box:hover .part:nth-child(1){
transform: rotateX(90deg) translateZ(150px);
}
/*下*/
.part:nth-child(2){
background: #85b933;
transform: rotateX(-90deg) translateZ(50px);
}
.box:hover .part:nth-child(2){
transform: rotateX(-90deg) translateZ(150px);
}
/*左*/
.part:nth-child(3){
background: #e68ad2;
transform: rotateY(-90deg) translateZ(50px);
}
.box:hover .part:nth-child(3){
transform: rotateY(-90deg) translateZ(150px);
}
/*右*/
.part:nth-child(4){
background: #77abca;
transform: rotateY(90deg) translateZ(50px);
}
.box:hover .part:nth-child(4){
transform: rotateY(90deg) translateZ(150px);
}
/*前*/
.part:nth-child(5){
background: #8877ca;
transform: translateZ(50px);
}
.box:hover .part:nth-child(5){
transform: translateZ(150px);
}
/*后*/
.part:nth-child(6){
background: #f98686;
transform: rotateY(180deg) translateZ(50px);
}
.box:hover .part:nth-child(6){
transform: rotateY(180deg) translateZ(150px);
}
.btn{
background: #77ABCA;
padding: 10px;
text-align: center;
width: 100px;
margin: 0px auto;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.btn:hover{
background: #5999bf;
}