#dado-wrapper {
  position:absolute;
  top:330px;
  left:130px;
  width: 140px;
  height: 140px;
  
  perspective: 1000px;
  perspective-origin: 50% 100%;
}

#dado {
  width: 100%;
  height: 100%;
  top: 100px;
  position: absolute;
  
  transform-style: preserve-3d;
  
  transition: transform 1s;
}

#dado-wrapper.inactivo #dado {
  cursor:not-allowed;
}

#dado:hover {
  cursor: pointer;
}

#dado .front {
  transform: 
    translateZ(70px);
}

#dado .back {
  transform: 
    rotateX(-180deg)
    translateZ(70px);
}

#dado .right {
  transform:
    rotateY(90deg)
    translateZ(70px);
}

#dado .left {
  transform:
    rotateY(-90deg)
    translateZ(70px);
}

#dado .top {
  transform:
    rotateX(90deg)
    translateZ(70px);
}

#dado .bottom {
  transform:
    rotateX(-90deg)
    translateZ(70px);
}

#dado div {
  background: #fff;
  display: block;
  position: absolute;
  width: 140px;
  height: 140px;
  border: 2px solid #999;
  box-shadow: inset 0px 0px 19px -1px rgba(150,80,0,.5);

  margin: 0 auto;  
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 500%;
  text-align: center;
  padding: 50px 0;
}

.dot {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: #333;
  border-radius: 15px;  
}

.front .dot1 { top: 55px; left: 55px; }
.back .dot1 { top: 15px; left: 15px; }
.back .dot2 { top: 95px; left: 95px; }
.right .dot1 { top: 15px; left: 15px; }
.right .dot2 { top: 55px; left: 55px; }
.right .dot3 { top: 95px; left: 95px; }
.left .dot1 { top: 15px; left: 15px; }
.left .dot2 { top: 15px; left: 95px; }
.left .dot3 { top: 95px; left: 15px; }
.left .dot4 { top: 95px; left: 95px; }
.top .dot1 { top: 15px; left: 15px; }
.top .dot2 { top: 15px; left: 95px; }
.top .dot3 { top: 55px; left: 55px; }
.top .dot4 { top: 95px; left: 15px; }
.top .dot5 { top: 95px; left: 95px; }
.bottom .dot1 { top: 15px; left: 15px; }
.bottom .dot2 { top: 15px; left: 55px; }
.bottom .dot3 { top: 15px; left: 95px; }
.bottom .dot4 { top: 95px; left: 15px; }
.bottom .dot5 { top: 95px; left: 55px; }
.bottom .dot6 { top: 95px; left: 95px; }