YATZEE!!!

index.html

<div id="background"> 
<div class="container">
  <div class="dice animate">
    <div class="panel">
      <div class="middle"></div>
    </div>
    <div class="panel">
      <div class="TL"></div>
      <div class="BR"></div>
    </div>
    <div class="panel">
      <div class="TL"></div>
      <div class="TR"></div>
      <div class="LM"></div>
      <div class="RM"></div>
      <div class="BL"></div>
      <div class="BR"></div>
    </div>
    <div class="panel">
      <div class="TL"></div>
      <div class="TR"></div>
      <div class="middle"></div>
      <div class="BR"></div>
      <div class="BL"></div>
    </div>
    <div class="panel">
      <div class="TL"></div>
      <div class="TR"></div>
      <div class="BL"></div>
      <div class="BR"></div>
    </div>
    <div class="panel">
      <div class="TL"></div>
      <div class="middle"></div>
      <div class="BR"></div>
    </div>
  </div>
</div>
</div>

style.css

@dot: 20px;
@size: 100px;

#background {
  height: 2000px;
  width: 100%;
  background-color: green;
}

// MIXIN - set blur
.diceSettings(@scale: 1, @blur: 0px) {
  -webkit-filter : blur(@blur);
     -moz-filter : blur(@blur);
      -ms-filter : blur(@blur);
       -o-filter : blur(@blur);
          filter : blur(@blur);
  
  -webkit-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale);
     -moz-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale);
      -ms-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale);
       -o-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale);
          transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale);
}

// MIXIN - animate spinning dice
.animateDice(@speed) {
  -webkit-animation : spinningH @speed infinite linear;
     -moz-animation : spinningH @speed infinite linear;
      -ms-animation : spinningH @speed infinite linear;
       -o-animation : spinningH @speed infinite linear;
          animation : spinningH @speed infinite linear;
}

@-webkit-keyframes spinningH {
  from {
    -webkit-transform:rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateX(360deg) rotateY(360deg);
  }
}

// MIXIN - create dice faces
.makeFaces(@tranZ) {
  &>div:nth-child(1) {
    -webkit-transform : translateZ(@tranZ);
       -moz-transform : translateZ(@tranZ);
        -ms-transform : translateZ(@tranZ);
         -o-transform : translateZ(@tranZ);
            transform : translateZ(@tranZ);
  }

  &>div:nth-child(2) {
    -webkit-transform : rotateY(90deg) translateZ(@tranZ);
       -moz-transform : rotateY(90deg) translateZ(@tranZ);
        -ms-transform : rotateY(90deg) translateZ(@tranZ);
         -o-transform : rotateY(90deg) translateZ(@tranZ);
            transform : rotateY(90deg) translateZ(@tranZ);
  }

  &>div:nth-child(3) {
    -webkit-transform : rotateY(180deg) translateZ(@tranZ);
       -moz-transform : rotateY(180deg) translateZ(@tranZ);
        -ms-transform : rotateY(180deg) translateZ(@tranZ);
         -o-transform : rotateY(180deg) translateZ(@tranZ);
            transform : rotateY(180deg) translateZ(@tranZ);
  }

  &>div:nth-child(4) {
    -webkit-transform : rotateY(-90deg) translateZ(@tranZ);
       -moz-transform : rotateY(-90deg) translateZ(@tranZ);
        -ms-transform : rotateY(-90deg) translateZ(@tranZ);
         -o-transform : rotateY(-90deg) translateZ(@tranZ);
            transform : rotateY(-90deg) translateZ(@tranZ);
  }

  &>div:nth-child(5) {
    -webkit-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg);
       -moz-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg);
        -ms-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg);
         -o-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg);
            transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg);
  }

  &>div:nth-child(6) {
    -webkit-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg);
       -moz-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg);
        -ms-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg);
         -o-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg);
            transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg);
  }
}

.dice{
  position: relative;
  margin: 0 auto;
  
  -webkit-transition : -webkit-transform 2s linear;
     -moz-transition : -moz-transform 2s linear;
      -ms-transition : -ms-transform 2s linear;
       -o-transition : -o-transform 2s linear;
          transition : transform 2s linear;

  -webkit-transform-style : preserve-3d;
     -moz-transform-style : preserve-3d;
      -ms-transform-style : preserve-3d;
       -o-transform-style : preserve-3d;
          transform-style : preserve-3d;
  
  height: @size * 2;
  width: @size * 2;
  .panel {
    height: @size;
    width: @size;
    top: 25%;
    left: 30%;
    border-radius: @size / 20; /* THIS CAN REALLY GOING TO HAMMER YOUR PAGE PAINT TIME!!! */
    position: absolute;
    background-color: #f9efe0;
    background-position:center center;
    /* box-shadow: 0px 0px 1px 2px #ccc;  AS CAN THIS */
    border: 1px solid #ccc;
    &>div {
      background-color: #222;
      position: absolute;
      height: @size / 5;
      width: @size / 5;
      border-radius: @size / 5;
    }
  }
  .makeFaces(@size / 2);
} 

// Generic dot positions
.middle {
  top: 40%;
  left: 40%;
}

.LM, .RM {
  top: 40%;
}

.TL, .TR {
  top: 15%;
}

.BL, .BR {
  bottom: 15%;
}

.TL, .BL, .LM {
  left: 15%;
}

.TR, .BR, .RM {
  right: 15%;
}

.container {
  position: fixed;
  
  -webkit-perspective : 500px;
     -moz-perspective : 500px;
      -ms-perspective : 500px;
       -o-perspective : 500px;
          perspective : 500px;

  -webkit-perspective-origin : 50% 50%;
     -moz-perspective-origin : 50% 50%;
      -ms-perspective-origin : 50% 50%;
       -o-perspective-origin : 50% 50%;
          perspective-origin : 50% 50%;
 }

.container:nth-child(1) {
  top: 30%;
  left: 40%;
  .animate{
    .animateDice(4s);
  }
}

.container:nth-child(2) {
  top: 20%;
  left: 30%;
  .animate{
    .animateDice(5s);
  }
  .diceSettings(0.5, 1px);
}

.container:nth-child(3) {
  top: 10%;
  left: 20%;
  .animate{
    .animateDice(2s);
  }
  .diceSettings(0.8, 0.5px);
}

.container:nth-child(4) {
  top: 40%;
  left: 70%;
  .animate{
    .animateDice(2s);
  }
  .diceSettings(0.2, 1.5px);
}

.container:nth-child(5) {
  top: 20%;
  left: 80%;
  .animate{
    .animateDice(2s);
  }
  .diceSettings(1, 0px);
  
}

.container:nth-child(6) {
  top: 20%;
  left: 60%;
  .animate{
    .animateDice(6s);
  }
  .diceSettings(1.5, 0px);
  
}

YATZEE!!!.markdown

YATZEE!!!

Spinning dice into a dark cup!

Forked from Alec Taylor's Pen YATZEE!!!.

A Pen by Captain Anonymous on CodePen.

License.