@-webkit-keyframes roll{10%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}30%{-webkit-transform:rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);transform:rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px)}50%{-webkit-transform:rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);transform:rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px)}70%{-webkit-transform:rotateX(360deg) rotateY(720deg) rotateZ(0deg);transform:rotateX(360deg) rotateY(720deg) rotateZ(0deg)}90%{-webkit-transform:rotateX(480deg) rotateY(960deg) rotateZ(0deg);transform:rotateX(480deg) rotateY(960deg) rotateZ(0deg)}}body{background:#333}.content{margin:auto auto;position:relative;width:200px;height:200px;-webkit-perspective:1500px;perspective:1500px}.die{position:absolute;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.5s ease-out;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,-webkit-transform 0.5s ease-out;cursor:pointer;-webkit-transform:rotateX(-45deg);transform:rotateX(-45deg)}.die.reset{-webkit-transition:-webkit-transform 0.1s ease-out;transition:-webkit-transform 0.1s ease-out;transition:transform 0.1s ease-out;transition:transform 0.1s ease-out,-webkit-transform 0.1s ease-out;-webkit-transform:rotateX(0);transform:rotateX(0)}.die.rolling{-webkit-animation:roll 3s linear;animation:roll 3s linear}.die[data-face="0"]{-webkit-transform:rotateX(-45deg) rotateY(0deg);transform:rotateX(-45deg) rotateY(0deg)}.die .face.face-0{-webkit-transform:rotateY(0deg) translateZ(34px) translateY(6.96px) rotateX(45deg);transform:rotateY(0deg) translateZ(34px) translateY(6.96px) rotateX(45deg)}.die[data-face="1"]{-webkit-transform:rotateX(-225deg) rotateY(-72deg);transform:rotateX(-225deg) rotateY(-72deg)}.die .face.face-1{top:100px;-webkit-transform:rotateY(72deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg);transform:rotateY(72deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg)}.die[data-face="2"]{-webkit-transform:rotateX(-45deg) rotateY(72deg);transform:rotateX(-45deg) rotateY(72deg)}.die .face.face-2{-webkit-transform:rotateY(-72deg) translateZ(34px) translateY(6.96px) rotateX(45deg);transform:rotateY(-72deg) translateZ(34px) translateY(6.96px) rotateX(45deg)}.die[data-face="3"]{-webkit-transform:rotateX(-225deg) rotateY(-144deg);transform:rotateX(-225deg) rotateY(-144deg)}.die .face.face-3{top:100px;-webkit-transform:rotateY(144deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg);transform:rotateY(144deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg)}.die[data-face="4"]{-webkit-transform:rotateX(-45deg) rotateY(144deg);transform:rotateX(-45deg) rotateY(144deg)}.die .face.face-4{-webkit-transform:rotateY(-144deg) translateZ(34px) translateY(6.96px) rotateX(45deg);transform:rotateY(-144deg) translateZ(34px) translateY(6.96px) rotateX(45deg)}.die[data-face="5"]{-webkit-transform:rotateX(-225deg) rotateY(-216deg);transform:rotateX(-225deg) rotateY(-216deg)}.die .face.face-5{top:100px;-webkit-transform:rotateY(216deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg);transform:rotateY(216deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg)}.die[data-face="6"]{-webkit-transform:rotateX(-45deg) rotateY(216deg);transform:rotateX(-45deg) rotateY(216deg)}.die .face.face-6{-webkit-transform:rotateY(-216deg) translateZ(34px) translateY(6.96px) rotateX(45deg);transform:rotateY(-216deg) translateZ(34px) translateY(6.96px) rotateX(45deg)}.die[data-face="7"]{-webkit-transform:rotateX(-225deg) rotateY(-288deg);transform:rotateX(-225deg) rotateY(-288deg)}.die .face.face-7{top:100px;-webkit-transform:rotateY(288deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg);transform:rotateY(288deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg)}.die[data-face="8"]{-webkit-transform:rotateX(-45deg) rotateY(288deg);transform:rotateX(-45deg) rotateY(288deg)}.die .face.face-8{-webkit-transform:rotateY(-288deg) translateZ(34px) translateY(6.96px) rotateX(45deg);transform:rotateY(-288deg) translateZ(34px) translateY(6.96px) rotateX(45deg)}.die[data-face="9"]{-webkit-transform:rotateX(-225deg) rotateY(-360deg);transform:rotateX(-225deg) rotateY(-360deg)}.die .face.face-9{top:100px;-webkit-transform:rotateY(360deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg);transform:rotateY(360deg) translateZ(-34px) translateY(-6.96px) rotateZ(180deg) rotateY(180deg) rotateX(45deg)}.die .face{position:absolute;left:50%;top:0;margin:0 -52px;border-left:52px solid transparent;border-right:52px solid transparent;border-bottom:100px solid rgba(30,180,20,0.75);width:0px;height:0px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;counter-increment:steps 1}.die .face:first-child{counter-increment:steps 0}.die .face:before{content:counter(steps);position:absolute;top:25px;left:-52px;color:#fff;text-shadow:1px 1px 3px #000;font-size:60px;text-align:center;line-height:100px;width:104px;height:100px}.die .face:after{content:"";position:absolute;bottom:-124px;left:-52px;border-left:52px solid transparent;border-right:52px solid transparent;border-top:24px solid rgba(30,180,20,0.75);width:0px;height:0px}h2{color:#fafafa}ul{list-style:none;margin:0;padding:0}ul>li{display:inline-block;margin:10px 10px}a{text-align:center;color:#fff;text-decoration:none;font-size:25px;font-weight:bold;padding:5px 15px;display:inline-block;border:1px solid #dcdcdc;border-radius:4px;background-color:#999}a.active{background-color:#333}a:hover{background-color:#666}a.randomize{margin:20px 10px}@-webkit-keyframes roll{10%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}30%{-webkit-transform:rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);transform:rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px)}50%{-webkit-transform:rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);transform:rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px)}70%{-webkit-transform:rotateX(360deg) rotateY(720deg) rotateZ(0deg);transform:rotateX(360deg) rotateY(720deg) rotateZ(0deg)}90%{-webkit-transform:rotateX(480deg) rotateY(960deg) rotateZ(0deg);transform:rotateX(480deg) rotateY(960deg) rotateZ(0deg)}}@keyframes roll{10%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}30%{-webkit-transform:rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);transform:rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px)}50%{-webkit-transform:rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);transform:rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px)}70%{-webkit-transform:rotateX(360deg) rotateY(720deg) rotateZ(0deg);transform:rotateX(360deg) rotateY(720deg) rotateZ(0deg)}90%{-webkit-transform:rotateX(480deg) rotateY(960deg) rotateZ(0deg);transform:rotateX(480deg) rotateY(960deg) rotateZ(0deg)}}
/*# sourceMappingURL=d10.css.map */