關於利用css動畫製作骰子運動
阿新 • • 發佈：2019-02-07
<!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>