您的位置：首页 > Web前端 > CSS

关于利用css动画制作骰子运动

2017-03-27 17:47 393 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,li,ul{ margin:0; padding: 0; }
li{ list-style: none; }
.dice{ position: relative; width: 125px; height: 125px; margin: 50px auto 0;
transform-style:preserve-3d;/*关键属性*/ /* -webkit-perspective: 125;透视*/ /*transform: rotate3d(1,1,1,45deg);*/
transition:transform 2s;
}
.dice li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; text-indent: -99em; background:url("images/bg.jpg") no-repeat;}
.dice li:nth-child(1){  background-position:-263px -259px; transform:translateZ(62.5px);}
.dice li:nth-child(2){  background-position:-10px -132px; transform:rotateY(90deg) translateZ(-62.5px);}
.dice li:nth-child(3){  background-position:-137px -131px; transform:rotateY(90deg) rotateX(90deg) translateZ(-62.5px);}
.dice li:nth-child(4){ background-position:-263px -132px; transform:rotateY(90deg) translateZ(62.5px);}
.dice li:nth-child(5){  background-position:-391px -132px; transform:rotateY(90deg) rotateX(90deg) translateZ(62.5px);}
.dice li:nth-child(6){ background-position:-264px -5px; transform:translateZ(-62.5px);}

.btn{ position: relative; margin-top:150px; }
.btn input{ position: absolute; left: 50%; top: 0; }
.btn input:nth-child(1){margin-left:-50px;}
.btn input:nth-child(2){margin-left:50px;}
.btn input:nth-child(3){margin-top:-50px;}
.btn input:nth-child(4){margin-top:50px;}
.btn input:nth-child(5){ margin-left:-10px;}

@keyframes doDo{
0%{transform: rotate3d(1,1,1,0);}
100%{ transform: rotate3d(1,1,1,360deg); }
}
.autoDo{
animation: doDo 5s linear infinite;
}
</style>
</head>
<body>
<ul class="dice">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

<div class="btn">
<input class="left" type="button" value="左" />
<input class="right" type="button" value="右" />
<input class="top" type="button" value="上" />
<input class="bottom" type="button" value="下" />
<input class="forever" type="button" value="自动转" />
</div>

<script src="http://cdn.cdnjs.net/jquery/1.11.1/jquery.min.js"></script>
<script>
var rotateObj={
ulNode:$('.dice'),
btnNode:$('.btn'),
inputNodes:$('.btn input'),
y:0,
x:0,
clickFun:function(e){//上右下左旋转的点击函数
var _this=this;
var target=e.target;
if($(target).hasClass('forever'))
return;

if(_this.ulNode.css('animation-play-state')=='running'){
_this.ulNode.removeClass('autoDo');
}

if($(target).hasClass('left')){//左
_this.y-=90;
}
else if($(target).hasClass('right'))//右
{
_this.y+=90;
}
else if($(target).hasClass('top'))//上
{
_this.x+=90;
}
else if($(target).hasClass('bottom'))//下
{
_this.x-=90;
}

window.setTimeout(function(){
_this.ulNode.css('transform',"rotateY("+_this.y+"deg) rotateX("+_this.x+"deg)");
},0);
},
autoRotateFun:function(e){
var _this=this;
var target=e.target;
if(!$(target).hasClass('forever'))
return;
_this.ulNode.addClass('autoDo');
},
init:function(){
var _this=this;
_this.btnNode.click(function(e){
_this.clickFun(e);
});

_this.btnNode.click(function(e){
_this.autoRotateFun(e);
});
}
};

rotateObj.init();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 动画
相关文章推荐
新的分享
章节导航