网上找的例子，然后增添了新的东西，在这里展示一下......

效果图预览：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>js+css3实现3D骰子特效 - 站长素材</title>
  6. <style>
  7. * { margin:0; padding:0; }
  8.  
  9. body { background:#efefef; overflow:hidden; }
  10.  
  11. h1 {
  12.     text-align:center; margin-top:40px; text-shadow:1px 1px 3px #000; font-size:40px; color:#fff;
  13.  
  14. }
  15.  
  16. #shadow {
  17.     height:300px; width:600px; position:absolute; top:400px; left:0; z-index:0;
  18.     background:-webkit-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
  19.     background:-moz-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
  20.     background:-ms-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
  21.     background:-o-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
  22.     background:radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
  23.     -webkit-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
  24.     -moz-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
  25.     -ms-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
  26.     -o-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
  27.     transform:perspective(100px) rotateX(60deg) rotateY(0deg);
  28.     opacity:0;
  29. }
  30.  
  31. #container {
  32.     /*background:black;*/
  33.     height:240px; width:240px; position:absolute; top:180px; z-index:1;
  34.     -webkit-transform-style:preserve-3d;
  35.     -moz-transform-style:preserve-3d;
  36.     -ms-transform-style:preserve-3d;
  37.     -o-transform-style:preserve-3d;
  38.     transform-style:preserve-3d;
  39.     -webkit-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
  40.     -moz-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
  41.     -ms-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
  42.     -o-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
  43.     transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
  44. }
  45. #container p {
  46.     position:absolute;
  47.     top:40%;
  48.     left:35%;
  49.     padding:5px;
  50.     word-spacing:0.2em;
  51.     line-height:20px;
  52.     background:black;
  53.     color:#fff;
  54.     text-align:center;
  55. }
  56. #container div {
  57.      height:240px; width:240px; position:absolute; left:0; top:0; color:#fff; line-height:240px; text-align:center; font-weight:bold; font-size:80px; cursor:pointer;
  58.      background:rgba( 239,239,239, 1 );
  59.      -webkit-transition:500ms all ease;
  60.      -moz-transition:500ms all ease;
  61.      -ms-transition:500ms all ease;
  62.      -o-transition:500ms all ease;
  63.      transition:500ms all ease;
  64. }
  65. #container div div {
  66.     border:1px solid #fff; /* rgba( 255,255,255, 1 ) */
  67.     box-shadow:1px 0 3px #fff,1px 0px 10px #efefef;
  68.     border-radius:8px;
  69.     background:-webkit-radial-gradient(center, #d81002, #b20c00 );
  70.     background:-moz-radial-gradient(center, #d81002, #b20c00 );
  71.     background:-ms-radial-gradient(center, #d81002, #b20c00 );
  72.     background:-o-radial-gradient(center, #d81002, #b20c00 );
  73.     background:radial-gradient(center, #d81002, #b20c00 );
  74. }
  75. #container div div:hover {
  76.     background:-webkit-radial-gradient(center, #f00, #b20c00 );
  77.     background:-moz-radial-gradient(center, #f00, #b20c00 );
  78.     background:-ms-radial-gradient(center, #f00, #b20c00 );
  79.     background:-o-radial-gradient(center, #f00, #b20c00 );
  80.     background:radial-gradient(center, #f00, #b20c00 );
  81. }
  82. #container div ul {
  83.     list-style:none;
  84.     margin:30px;
  85. }
  86. #container div li {
  87.     width: 60px;
  88.     height:60px;
  89.     float:left;
  90.     overflow:hidden;
  91.     -webkit-transition:500ms all ease;
  92.     -moz-transition:500ms all ease;
  93.     -ms-transition:500ms all ease;
  94.     -o-transition:500ms all ease;
  95.     transition:500ms all ease;
  96. }
  97.  
  98. #container div li span  {
  99.     width:50px; height:50px; margin:5px auto;
  100.     display:block;
  101.     background:-webkit-linear-gradient(top, #eee, #fff );
  102.     background:-moz-linear-gradient(top, #eee, #fff );
  103.     background:-ms-linear-gradient(top, #eee, #fff );
  104.     background:-o-linear-gradient(top, #eee, #fff );
  105.     background:linear-gradient(top, #eee, #fff );
  106.     border-radius:25px;
  107.     box-shadow:-1px -1px 2px #000;
  108. }
  109. </style>
  110. <script src="Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
  111. <script language="javascript" type="text/javascript">
  112. Aui.ready( function()
  113. {
  114.     if( /ie/g.test( Aui.browser() ) )
  115.     {
  116.         Aui("body").html("Adam CSS 3.0 effect，支持非IE浏览器。你懂的！")
  117.                    .setStyle(
  118.                    {
  119.                        "color" : "#000",
  120.                        "text-align" : "center",
  121.                     "font-size" : "50px",
  122.                     "font-weight" : "bolder",
  123.                     "line-height" : "500px"
  124.                    });
  125.     }
  126.     else
  127.     {
  128.         var oDoc = Aui(document),
  129.             docWidth = oDoc.width();
  130.  
  131.         Aui("body").html("<div id=\"hujunzheng\"></h1><div id=\"container\" style=\"left:"+ ( ( docWidth - 240 )*0.5 ) +"px;\"></div><strong id=\"shadow\" style=\"left:"+ ( ( docWidth - 600 )*0.5 ) +"px;\"></strong></div>");
  132.  
  133.         var oContainer = Aui.byID("#container")[0],
  134.             AuiCon = Aui( oContainer ),
  135.             AuiShadow = Aui("#shadow"),
  136.  
  137.             transform = function( elem, value, key )
  138.             {
  139.                 key = key || "transform";
  140.  
  141.                 [ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre )
  142.                 {
  143.                     elem.style[ pre + key ] = value;
  144.                 });    
  145.  
  146.                 return elem;
  147.             },
  148.             piece = function( value, key )
  149.             {
  150.                 var str = "";
  151.  
  152.                 key = key || "transform";
  153.  
  154.                 [ "-webkit-", "-moz-", "-ms-", "-o-",  "" ].forEach( function( pre )
  155.                 {
  156.                     str += ( pre + key + ":" + value );
  157.                     return false;
  158.                 });    
  159.  
  160.                 return str;
  161.             },
  162.             startMove = function startMove( obj )
  163.             {
  164.                 obj.timer = obj.timer || null;
  165.  
  166.                 clearInterval( obj.timer );
  167.  
  168.                 obj.timer = setInterval (function ()
  169.                 {
  170.                     x -= speedY;
  171.                     y += speedX;
  172.  
  173.                     speedY *= 0.95;
  174.                     speedX *= 0.95;
  175.  
  176.                     if( Math.abs( speedX ) < 0.1 && Math.abs( speedY ) < 0.1 )
  177.                     {
  178.                         stopMove( obj.timer );
  179.                     };
  180.  
  181.                     transform( obj, "perspective(" + pers + "px) rotateX("+ x +"deg) rotateY(" + y +"deg)" );
  182.  
  183.                 }, 30);
  184.             },
  185.  
  186.             stopMove = function( t )
  187.             {
  188.                 clearInterval( t );
  189.             },
  190.  
  191.             addEvent = function ( obj, sEvent, fn )
  192.             {
  193.                 if( obj.attachEvent )
  194.                 {
  195.                     obj.attachEvent( "on" + sEvent, fn );
  196.                 }
  197.                 else
  198.                 {
  199.                     obj.addEventListener( sEvent, fn, false );
  200.                 };
  201.             },
  202.  
  203.             onMouseWheel = function( e )
  204.             {
  205.                 if( e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0 )
  206.                 {
  207.                     if( pers < 2000 )
  208.                     {
  209.                         pers += 50;
  210.                         _top -= 0.5;
  211.                     };
  212.                 }
  213.                 else
  214.                 {
  215.                     if( pers > 50 )
  216.                     {
  217.                         pers -= 50;
  218.                         _top += 0.5;
  219.                     };
  220.                 };
  221.  
  222.                 AuiShadow.setStyle( "top", _top );
  223.                 transform( oContainer, "perspective(" + pers + "px) rotateX("+ x +"deg) rotateY(" + y +"deg)" );
  224.  
  225.                 if( e.preventDefault )
  226.                 {
  227.                     e.preventDefault();
  228.                 };
  229.  
  230.                 return false;
  231.             },
  232.  
  233.             setNum = function( obj, n )
  234.             {
  235.                 var arr = [
  236.                     [ 4 ],
  237.                     [ 0, 8 ],
  238.                     [ 0, 4, 8 ],
  239.                     [ 0, 2, 6, 8 ],
  240.                     [ 0, 2, 4, 6, 8 ],
  241.                     [ 0, 2, 3, 5, 6, 8]
  242.                 ];
  243.                 Aui.each( arr[n], function( i , v )
  244.                 {
  245.                     obj.find("li")
  246.                        .eq( v )
  247.                        .html("<span></span>");
  248.                 });
  249.             }; 
  250.  
  251.             x = -10,
  252.             y = 45,
  253.             speedX = 0,
  254.             speedY = 0,
  255.             i = 1,
  256.             d_x = 0,
  257.             d_y = 0,
  258.             d_z = 519,
  259.             pers = 2000,
  260.             _top = 400;
  261.  
  262.         while( i < 7 )
  263.         {
  264.             if( i < 5 )
  265.             {
  266.                 d_x = 0;
  267.                 d_y = i * 90;
  268.             }
  269.             else if( i === 5 )
  270.             {
  271.                 d_x = 90;
  272.                 d_y = 0;
  273.             }
  274.             else
  275.             {
  276.                 d_x = -90;
  277.                 d_y = 0;
  278.             };
  279.             AuiCon.append( "<div id=\"box-"+ i +"\" style=\""+ piece("rotateX(" + d_x + "deg) rotateY(" + d_y + "deg) translateZ(" + d_z + "px) scaleX( 0.4 ) scaleY( 0.4 );") +"opacity:0;\"><div><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>" );
  280.  
  281.             i += 1;
  282.         };
  283.  
  284.         var oDiv = AuiCon.children("div");
  285.  
  286.         Aui.each( oDiv, function( i )
  287.         {
  288.             ( function( d , obj )
  289.             {
  290.                 setTimeout( function()
  291.                 {
  292.                     obj.style.opacity = 1;
  293.  
  294.                     setTimeout( function()
  295.                     {
  296.                         setNum( Aui( obj ), d );
  297.  
  298.                         if( d < 4 )
  299.                         {
  300.                             transform( obj, "rotateX(0deg) rotateY(" + ( i * 90 )+"deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );
  301.                         }
  302.                         else if( d === 5 )
  303.                         {
  304.                             transform( obj, "rotateX(90deg) rotateY(0deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );
  305.  
  306.                             setTimeout( function()
  307.                             {
  308.                                 AuiShadow.fx({ opacity : 1 }, 400 );
  309.  
  310.                                 Aui.each( oDiv, function( x )
  311.                                 {
  312.                                     if(  x < 4 )
  313.                                     {
  314.                                         transform( this, "rotateX(0deg) rotateY(" + ( x * 90 )+"deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );
  315.                                     }
  316.                                     else if( x === 5 )
  317.                                     {
  318.                                         transform( this, "rotateX(90deg) rotateY(0deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );
  319.                                     }
  320.                                     else if( x === 4)
  321.                                     {
  322.                                         transform( this, "rotateX(-90deg) rotateY(0deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );
  323.                                     };
  324.                                 });
  325.                             }, 400 );
  326.                         }
  327.                         else if( d === 4)
  328.                         {
  329.                             transform( obj, "rotateX(-90deg) rotateY(0deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );
  330.                         };
  331.                     } , 100 );
  332.  
  333.                 } , d * 200 );
  334.  
  335.             })( i, this );
  336.  
  337.         });
  338.  
  339.         oDoc.mousedown( function( e )
  340.         {
  341.  
  342.             var moveX = e.clientX,
  343.                 moveY = e.clientY;
  344.  
  345.             var startX = x;
  346.             var startY = y;
  347.  
  348.             var lastX = moveX;
  349.             var lastY = moveY;
  350.  
  351.             speedX = speedY = 0;
  352.  
  353.             oDoc.mousemove( function( e )
  354.             {
  355.  
  356.                 y = startY + ( e.clientX - moveX )/5;
  357.                 x = startX - ( e.clientY - moveY )/5;
  358.  
  359.                 transform( oContainer, "perspective(" + pers + "px) rotateX("+ Math.ceil( x ) +"deg) rotateY(" + Math.ceil( y ) +"deg)" );
  360.  
  361.                 speedX = Math.ceil( ( e.clientX - lastX )/2 );
  362.  
  363.                 speedY = Math.ceil( ( e.clientY - lastY )/2 );
  364.  
  365.                 lastX = e.clientX;
  366.                 lastY = e.clientY;
  367.  
  368.             });
  369.  
  370.             oDoc.mouseup( function()
  371.             {
  372.                 this.onmousemove = null;
  373.                 this.onmouseup = null;
  374.                 startMove( oContainer );
  375.             });
  376.  
  377.             stopMove( oContainer.timer );
  378.             return false;
  379.         });
  380.  
  381.         var wheel = function( e )
  382.         {
  383.             onMouseWheel.call( null, e || window.event );
  384.         };
  385.  
  386.         addEvent( oDoc[0], "mousewheel", wheel );
  387.         addEvent( oDoc[0], "DOMMouseScroll", wheel );
  388.     };
  389.  
  390.     /*
  391.         加入之后使得在骰子生成之后开始转动
    　　　　　2s之后执行 每隔100ms执行函数（模拟鼠标的移动位置）
  392.     */
  393.  
  394.     window.setTimeout(function(){
  395.         var cntcc = 0;
  396.         var hjzgg;
  397.         var clientX = Math.ceil(Math.random()*500);
  398.         var clientY = Math.ceil(Math.random()*500);
  399.         var moveX = clientX,
  400.             moveY = clientY;
  401.  
  402.         var startX = x;
  403.         var startY = y;
  404.  
  405.         var lastX = moveX;
  406.         var lastY = moveY;
  407.  
  408.         speedX = speedY = 0;
  409.         hjzgg=window.setInterval(function(){
  410.             ++cntcc;
  411.             y = startY + ( clientX - moveX )/5;
  412.             x = startX - ( clientY - moveY )/5;
  413.             if(cntcc==50){
  414.                  window.clearInterval(hjzgg);
  415.             }
  416.             transform( oContainer, "perspective(" + pers + "px) rotateX("+ Math.ceil( x ) +"deg) rotateY(" + Math.ceil( y ) +"deg)" );
  417.  
  418.             speedX = Math.ceil( ( clientX - lastX )/2 );
  419.  
  420.             speedY = Math.ceil( ( clientY - lastY )/2 );
  421.             lastX = clientX;
  422.             lastY = clientY;
  423.             clientX = Math.ceil(Math.random()*500);
  424.             clientY = Math.ceil(Math.random()*500);
  425.         }, 100);
  426.     },2000); 
  427.  
  428.     /*********************************************************/
  429. });
  430. </script>
  431. </head>
  432.  
  433. <body>
  434.  
  435. </body>
  436. </html>

项目下载地址：

http://files.cnblogs.com/files/hujunzheng/%E8%BD%AC%E5%8A%A8%E7%9A%84%E9%AA%B0%E5%AD%90.zip

js+css实现骰子的随机转动的更多相关文章

  1. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  2. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

  3. JS实现掷骰子

    JS实现掷骰子 实现方法: 方法一:通过background-position.background-image.backg-repeat三个属性以及jquery animate()方法改变背景骰子图 ...

  4. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  5. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  6. gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  7. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

  8. springmvc js/css路径问题

    ①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...

  9. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

随机推荐

  1. bzoj1968真·想sha法bi题

    本来想打表找规律的来着,,, 线性筛吗?一边筛一边累加答案?那不就不线性了吗...1e6悬啊 而且不是质因数个数而是因数个数,统计起来应该还要用数学方法 ...好尴尬 等一下,不要求质数的话我筛个p ...

  2. js get browser vertion (js获取浏览器信息版本)

    1问题:js get browser vertion (js获取浏览器信息版本) 2解决方案 Copy this script into your JavaScript files. It works ...

  3. Project 'king.commons' is missing required library: 'lib/plweb.jar' Build path Build Path Problem

    问题描述:之前在项目里引用一个jar 包,后来不用了删掉 ,但是没有删干净,然后报以下错误. 解决方案: 1.删除libraries 2.找到该项目下的 .classpath 文件,用记事本打开 ,删 ...

  4. php 迭代器使用

    /** * 执行入口 * @author tianyunchong * Time: 4:48 pm * @return null */ public function run() { /** 遍历下所 ...

  5. jsp 中 有没有类似java if else语句

    <c:when test=""></c:when> <c:otherwise></c:otherwise> 有if else的功能 ...

  6. 解决：View调用invalidate()后不刷新onDraw()

    近来学android图片处理,按照例子来,自定义一个View,之后在Activity里面手动调用该View的invalidate()后,一直无法刷新onDraw() 上网搜了一下,有两种解决办法: 一 ...

  7. java 过滤器Filter

    一.首先在web.xml里进行拦截过滤 <filter>        <filter-name>platformServiceAgreementFilter</filt ...

  8. POJ2369 Permutations（置换的周期）

    链接:http://poj.org/problem?id=2369 Permutations Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  9. 2016huasacm暑假集训训练五 E - What Is Your Grade?

    题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/E 题意:给做出的题目个数,5个的100分,4个的前n/2的同学95,后n/2的90 ...

  10. vim的配置与使用

    经历了一次source insight 一言不合就崩溃之后,决定还是花点时间好好配置和学习以下vim 于是找到大神的配置 https://github.com/humiaozuzu/dot-vimrc ...