Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Würfel 20 Seiten

Würfel 20 Seiten

Ein Würfel von 1 - 6 kennt jeder. Hie ist einer mit 20 Seiten

Der hier verwendete Code

<style> .cube-container { width: 190px; height: 190px; position: relative; margin: 100px auto; -webkit-perspective: 1000; perspective: 1000; } #cube { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg ); transform: translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg ); -webkit-transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; } #cube figure { width: 189px; height: 188px; display: block; position: absolute; background: url('image/blue.png') top center no-repeat; font-size:70px; line-height: 190px; font-family: sans-serif; text-align: center; text-shadow: #000 -1px -1px 0, #fff 1px 1px 0; color: #f1f1f1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* top 5 point */ #cube .face01 { -webkit-transform: rotateY( 36deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px ); transform: rotateY( 36deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px ); } #cube .face06 { -webkit-transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); } #cube .face08 { -webkit-transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); } #cube .face04 { -webkit-transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px ); } #cube .face10 { -webkit-transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px ); transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px ); } /* bottom 5 point */ #cube .face18 { -webkit-transform: rotateY( 0deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px ); transform: rotateY( 0deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px ); } #cube .face16 { -webkit-transform: rotateY( 72deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px ); transform: rotateY( 72deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px ); } #cube .face11 { -webkit-transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); } #cube .face20 { -webkit-transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); } #cube .face14 { -webkit-transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px ); transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px ); } /* middle point down */ #cube .face13 { -webkit-transform: rotateY( 36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); } #cube .face09 { -webkit-transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); } #cube .face02 { -webkit-transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); } #cube .face05 { -webkit-transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); } #cube .face17 { -webkit-transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); } /* middle point up */ #cube .face12 { -webkit-transform: rotateY( 0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY( 0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); } #cube .face19 { -webkit-transform: rotateY( 72deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px ); transform: rotateY( 72deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px ); } #cube .face03 { -webkit-transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px ); transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px ); } #cube .face07 { -webkit-transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px ); transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px ); } #cube .face15 { -webkit-transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); } #cube.show-1 { -webkit-transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -38deg ) rotateZ( 35deg ); transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -38deg ) rotateZ( 35deg ); } #cube.show-2 { -webkit-transform: translateZ( -60px ) rotateY( 170deg ) rotateX( 5deg ) rotateZ( -60deg ); transform: translateZ( -60px ) rotateY( 170deg ) rotateX( 5deg ) rotateZ( -60deg ); } #cube.show-3 { -webkit-transform: translateZ( -60px ) rotateY( -144deg ) rotateX( -8deg ) rotateZ( -6deg ); transform: translateZ( -60px ) rotateY( -144deg ) rotateX( -8deg ) rotateZ( -6deg ); } #cube.show-4 { -webkit-transform: translateZ( -60px ) rotateY( 76deg ) rotateX( 135deg ) rotateZ( -62deg ); transform: translateZ( -60px ) rotateY( 76deg ) rotateX( 135deg ) rotateZ( -62deg ); } #cube.show-5 { -webkit-transform: translateZ( -60px ) rotateY( 118deg ) rotateX( -53deg ) rotateZ( -35deg ); transform: translateZ( -60px ) rotateY( 118deg ) rotateX( -53deg ) rotateZ( -35deg ); } #cube.show-6 { -webkit-transform: translateZ( -60px ) rotateY( -75deg ) rotateX( 135deg ) rotateZ( 65deg ); transform: translateZ( -60px ) rotateY( -75deg ) rotateX( 135deg ) rotateZ( 65deg ); } #cube.show-7 { -webkit-transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 187deg ) rotateZ( 185deg ); transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 187deg ) rotateZ( 185deg ); } #cube.show-8 { -webkit-transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -153deg ) rotateZ( 75deg ); transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -153deg ) rotateZ( 75deg ); } #cube.show-9 { -webkit-transform: translateZ( -60px ) rotateY( -73deg ) rotateX( -175deg ) rotateZ( 15deg ); transform: translateZ( -60px ) rotateY( -73deg ) rotateX( -175deg ) rotateZ( 15deg ); } #cube.show-10 { -webkit-transform: translateZ( -60px ) rotateY( 51deg ) rotateX( -42deg ) rotateZ( -41deg ); transform: translateZ( -60px ) rotateY( 51deg ) rotateX( -42deg ) rotateZ( -41deg ); } #cube.show-11 { -webkit-transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -220deg ) rotateZ( -37deg ); transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -220deg ) rotateZ( -37deg ); } #cube.show-12 { -webkit-transform: translateZ( -60px ) rotateY( -10deg ) rotateX( -4deg ) rotateZ( -120deg ); transform: translateZ( -60px ) rotateY( -10deg ) rotateX( -4deg ) rotateZ( -120deg ); } #cube.show-13 { -webkit-transform: translateZ( -60px ) rotateY( 35deg ) rotateX( 4deg ) rotateZ( -177deg ); transform: translateZ( -60px ) rotateY( 35deg ) rotateX( 4deg ) rotateZ( -177deg ); } #cube.show-14 { -webkit-transform: translateZ( -60px ) rotateY( -296deg ) rotateX( 72deg ) rotateZ( 30deg ); transform: translateZ( -60px ) rotateY( -296deg ) rotateX( 72deg ) rotateZ( 30deg ); } #cube.show-15 { -webkit-transform: translateZ( -60px ) rotateY( -238deg ) rotateX( 129deg ) rotateZ( 40deg ); transform: translateZ( -60px ) rotateY( -238deg ) rotateX( 129deg ) rotateZ( 40deg ); } #cube.show-16 { -webkit-transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ( 113deg ); transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ( 113deg ); } #cube.show-17 { -webkit-transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 8deg ) rotateZ( 175deg ); transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 8deg ) rotateZ( 175deg ); } #cube.show-18 { -webkit-transform: translateZ( -60px ) rotateY( -50deg ) rotateX( 25deg ) rotateZ( 288deg ); transform: translateZ( -60px ) rotateY( -50deg ) rotateX( 25deg ) rotateZ( 288deg ); } #cube.show-19 { -webkit-transform: translateZ( -60px ) rotateY( -72deg ) rotateX( 4deg ) rotateZ( 352deg ); transform: translateZ( -60px ) rotateY( -72deg ) rotateX( 4deg ) rotateZ( 352deg ); } #cube.show-20 { -webkit-transform: translateZ( -60px ) rotateY( 50deg ) rotateX( -220deg ) rotateZ( 38deg ); transform: translateZ( -60px ) rotateY( 50deg ) rotateX( -220deg ) rotateZ( 38deg ); } .cube-container:after { content:""; display: block; position: relative; width: 380px; height: 380px; top: 70px; margin-left: -96px; background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%); background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%); /* W3C */ -webkit-transform: scaleY(0.3); transform: scaleY(0.3); } #buttons { text-align: center; position: relative; } #buttons input[type="button"] { position: relative; width: 80px; border-width: 0; padding: 6px 16px; font-family: sans-serif; text-shadow: 1px 1px 1px rgb(255, 255, 255); font-size: 14px; border-radius:5px 5px 5px 5px; box-shadow:0px 0px 3px #000; background:gradient( linear, 50% 0%, 50% 100%, from( rgb(238, 238, 238) ), to( rgb(204, 204, 204) ) ); background-clip: padding-box; } #buttons input[type="button"]:active { top: 1px; box-shadow:0px 0px 2px #000; background:gradient( linear, 50% 0%, 50% 100%, from( rgb(204, 204, 204) ), to( rgb(238, 238, 238) ) ); } #outcome { text-align: center; position: relative; z-index: 9; top:-250px; opacity: 0; /* oooh I love pointer events for stuff like this */ pointer-events: none; -webkit-transition: opacity 400ms; transition: opacity 400ms; } #outcome.show { opacity: 1; } #text { font-size: 40px; color: #fff; text-shadow: rgba( 0, 0, 0, 0.5 ) 1px 1px 0; background-color: rgba( 30, 30, 30, 0.8 ); padding: 20px 30px; display: inline-block; border-radius: 10px; box-shadow: rgba( 0, 0, 0, 0.7 ) 1px 1px 1px; } </style> <section class="article__demo"> <section class="cube-container"> <div id="cube" class="show-1"> <figure class="face01">1</figure> <figure class="face02">2</figure> <figure class="face03">3</figure> <figure class="face04">4</figure> <figure class="face05">5</figure> <figure class="face06">6</figure> <figure class="face07">7</figure> <figure class="face08">8</figure> <figure class="face09">9</figure> <figure class="face10">10</figure> <figure class="face11">11</figure> <figure class="face12">12</figure> <figure class="face13">13</figure> <figure class="face14">14</figure> <figure class="face15">15</figure> <figure class="face16">16</figure> <figure class="face17">17</figure> <figure class="face18">18</figure> <figure class="face19">19</figure> <figure class="face20">20</figure> </div> </section> <section id="buttons"> <input type="button" name="roll" value="Roll it!" id="roll"> </section> <section id="outcome"> <div id="text">Dreh mich</div> </section> </section> <script> var randomNumber = function(low, high) { return Math.floor( Math.random() * (1 + high - low) ) + low; }; var cube = document.getElementById('cube'); var outcome = document.getElementById('outcome'); var outcomeText = document.getElementById('text'); var messageDelay; //timer var fadeout; //timer var messages = [ 'Your Bard was killed', 'You smote the orc', 'You escaped the Ice Dragon', 'Lightning Bolt succeeded', 'Critical hit', 'You are Lawful Evil', 'You fell into the Well of Sorrows', 'You found the Goblet of Endless Grog', 'You encountered a Harpy', 'Charisma + 10', 'You lose 11 Hit Points', 'You disarmed the trap', 'Plate Mail + 3', '14 Damage', 'Spell failure', 'Backstab successful', 'Your wand broke', 'Surprise Attack', 'You broke through the door', 'You turned to stone' ]; var showFace = function() { var face = randomNumber( 1, 20 ); //if not already at this number if (cube.className !== 'show-' + face ) { cube.className = 'show-' + face; //delay for spin to finish messageDelay = setTimeout( function() { //show message outcomeText.innerHTML = messages[ face - 1 ]; outcome.className = 'show'; //display message then fade out fadeout = setTimeout( function() { //hide message outcome.className = ''; }, 2000); } , 1000); } else { //repeat number, try again return showFace(); } }; document.getElementById('roll').addEventListener( 'click', function() { //fade message outcome.className = ''; //clear timers if they are there if ( typeof messageDelay === "number" ) { clearTimeout( messageDelay ); clearTimeout( fadeout ); } showFace(); }, false); </script>