http://codepen.io/danilo-almeida/pen/PNrXGq <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roll Dice</title> <style type="text/css"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } body { background: #f8f9f9; text-align: center; padding: 20px; perspective: 800px; perspective-origin: 50% 100px; font-family: Arial; } .dice { height: 200px; margin: 100px auto 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: relative; width: 200px; transform-style: preserve-3d; -moz-transform: scale(0.4, 0.4); -ms-transform: scale(0.4, 0.4); -webkit-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); -moz-transform: rotateY(0deg) rotateX(-60deg); -ms-transform: rotateY(0deg) rotateX(-60deg); -webkit-transform: rotateY(0deg) rotateX(-60deg); transform: rotateY(0deg) rotateX(-60deg); -moz-transition: cubic-bezier(0.645, 0.045, 0.355, 1) 300ms; -o-transition: cubic-bezier(0.645, 0.045, 0.355, 1) 300ms; -webkit-transition: cubic-bezier(0.645, 0.045, 0.355, 1) 300ms; transition: cubic-bezier(0.645, 0.045, 0.355, 1) 300ms; } .dice[data-dice='dice-1'] { -moz-transform: rotateY(0deg) rotateX(30deg); -ms-transform: rotateY(0deg) rotateX(30deg); -webkit-transform: rotateY(0deg) rotateX(30deg); transform: rotateY(0deg) rotateX(30deg); } .dice[data-dice='dice-2'] { -moz-transform: rotateY(0deg) rotateX(-240deg); -ms-transform: rotateY(0deg) rotateX(-240deg); -webkit-transform: rotateY(0deg) rotateX(-240deg); transform: rotateY(0deg) rotateX(-240deg); } .dice[data-dice='dice-3'] { -moz-transform: rotateY(0deg) rotateX(-60deg); -ms-transform: rotateY(0deg) rotateX(-60deg); -webkit-transform: rotateY(0deg) rotateX(-60deg); transform: rotateY(0deg) rotateX(-60deg); } .dice[data-dice='dice-4'] { -moz-transform: rotateY(-290deg) rotateX(-90deg); -ms-transform: rotateY(-290deg) rotateX(-90deg); -webkit-transform: rotateY(-290deg) rotateX(-90deg); transform: rotateY(-290deg) rotateX(-90deg); } .dice[data-dice='dice-5'] { -moz-transform: rotateY(-70deg) rotateX(-180deg); -ms-transform: rotateY(-70deg) rotateX(-180deg); -webkit-transform: rotateY(-70deg) rotateX(-180deg); transform: rotateY(-70deg) rotateX(-180deg); } .dice[data-dice='dice-6'] { -moz-transform: rotateY(180deg) rotateX(-30deg); -ms-transform: rotateY(180deg) rotateX(-30deg); -webkit-transform: rotateY(180deg) rotateX(-30deg); transform: rotateY(180deg) rotateX(-30deg); } .dice .side { background-color: #513f54; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF513F54', endColorstr='#FF251A28'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iOTglIj48c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjNTEzZjU0Ii8+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMyNTFhMjgiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #513f54 1%, #251a28 98%); background-image: -webkit-radial-gradient(center, ellipse cover, #513f54 1%, #251a28 98%); background-image: radial-gradient(ellipse cover at center, #513f54 1%, #251a28 98%); position: absolute; width: 200px; height: 200px; border: 1px solid #38283C; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .dice .side .dot { width: 30px; height: 30px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background: #988D8B; box-shadow: inset 1px 1px 3px #000000; position: absolute; bottom: 0; top: 0; left: 0; right: 0; margin: auto; } .dice .six-dots { transform: translateZ(-100px) rotateY(180deg); } .dice .six-dots .dot:nth-of-type(1) { left: -130px; top: 130px; } .dice .six-dots .dot:nth-of-type(2) { left: 130px; top: -130px; } .dice .six-dots .dot:nth-of-type(3) { left: -130px; top: -130px; } .dice .six-dots .dot:nth-of-type(4) { left: 130px; top: 130px; } .dice .six-dots .dot:nth-of-type(5) { left: -130px; top: 0px; } .dice .six-dots .dot:nth-of-type(6) { left: 130px; top: 0px; } .dice .five-dots { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; } .dice .five-dots .dot:nth-of-type(2) { left: 130px; top: -130px; } .dice .five-dots .dot:nth-of-type(3) { left: -130px; top: -130px; } .dice .five-dots .dot:nth-of-type(4) { left: 130px; top: 130px; } .dice .five-dots .dot:nth-of-type(5) { left: -130px; top: 130px; } .dice .four-dots { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; } .dice .four-dots .dot:nth-of-type(1) { left: -130px; top: 130px; } .dice .four-dots .dot:nth-of-type(2) { left: 130px; top: -130px; } .dice .four-dots .dot:nth-of-type(3) { left: -130px; top: -130px; } .dice .four-dots .dot:nth-of-type(4) { left: 130px; top: 130px; } .dice .three-dots { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; } .dice .three-dots .dot:nth-of-type(2) { left: -130px; top: 130px; } .dice .three-dots .dot:nth-of-type(3) { left: 130px; top: -130px; } .dice .two-dots { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; } .dice .two-dots .dot:nth-of-type(1) { left: -130px; top: 130px; } .dice .two-dots .dot:nth-of-type(2) { left: 130px; top: -130px; } .dice .one-dot { transform: translateZ(100px); } </style> </head> <body> <html> <head></head> <body> <button class="btn btn-warning btn-lg roll"> <i class="fa fa-hand-pointer-o"></i> Roll! </button> <div class="dice" data-dice> <div class="side one-dot"> <i class="dot"></i> </div> <div class="side two-dots"> <i class="dot"></i> <i class="dot"></i> </div> <div class="side three-dots"> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> </div> <div class="side four-dots"> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> </div> <div class="side five-dots"> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> </div> <div class="side six-dots"> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> <i class="dot"></i> </div> </div> </body> </html> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var Dice = function ($) { var elementDice = $('.dice'); var numberDice = function() { var max = 7, min = 1; return parseInt(Math.random() * (max - min) + min, 10) } var setDice = function(num){ elementDice.attr('data-dice', 'dice-' + num); } return { init: function () { $('.roll').on('click', function(){ setDice(numberDice()); }); }(), } }(jQuery); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 骰子 喜欢 (0)or分享 (0)
