Ein Würfel von 1 - 6 kennt jeder. Hie ist einer mit 20 Seiten
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>