.cube-container{width:190px;height:190px;position:relative;margin:50px auto;perspective:1000}#cube{width:100%;height:100%;position:absolute;transform-style:preserve-3d;transform:translateZ(-60px) rotateY(0deg) rotateX(0deg) rotate(0deg);transition:transform 3s cubic-bezier(.25,1,.5,1);scale:.5}#cube figure{width:189px;height:188px;display:block;position:absolute;background:url(https://matthewlein.com/content/experiments/00-20-sided-die/blue.png);font-size:50px;line-height:190px;font-family:sans-serif;text-align:center;text-shadow:#000 -1px -1px 0,#fff 1px 1px 0;color:#f1f1f1;backface-visibility:hidden}#cube .face01{transform:rotateY(36deg) rotateX(53deg) rotate(0deg) translateZ(120px)}#cube .face06{transform:rotateY(108deg) rotateX(53deg) rotate(240deg) translateZ(120px)}#cube .face08{transform:rotateY(180deg) rotateX(53deg) rotate(240deg) translateZ(120px)}#cube .face04{transform:rotateY(253deg) rotateX(53deg) rotate(120deg) translateZ(120px)}#cube .face10{transform:rotateY(324deg) rotateX(53deg) rotate(0deg) translateZ(120px)}#cube .face18{transform:rotateY(0deg) rotateX(-53deg) rotate(60deg) translateZ(120px)}#cube .face16{transform:rotateY(72deg) rotateX(-53deg) rotate(60deg) translateZ(120px)}#cube .face11{transform:rotateY(144deg) rotateX(-53deg) rotate(180deg) translateZ(120px)}#cube .face20{transform:rotateY(216deg) rotateX(-53deg) rotate(180deg) translateZ(120px)}#cube .face14{transform:rotateY(288deg) rotateX(-53deg) rotate(60deg) translateZ(120px)}#cube .face13{transform:rotateY(36deg) rotateX(11deg) rotate(180deg) translateZ(120px)}#cube .face09{transform:rotateY(108deg) rotateX(11deg) rotate(180deg) translateZ(120px)}#cube .face02{transform:rotateY(180deg) rotateX(11deg) rotate(300deg) translateZ(120px)}#cube .face05{transform:rotateY(253deg) rotateX(11deg) rotate(300deg) translateZ(120px)}#cube .face17{transform:rotateY(324deg) rotateX(11deg) rotate(180deg) translateZ(120px)}#cube .face12{transform:rotateY(0deg) rotateX(-11deg) rotate(120deg) translateZ(120px)}#cube .face19{transform:rotateY(72deg) rotateX(-11deg) rotate(0deg) translateZ(120px)}#cube .face03{transform:rotateY(144deg) rotateX(-11deg) rotate(0deg) translateZ(120px)}#cube .face07{transform:rotateY(216deg) rotateX(-11deg) rotate(0deg) translateZ(120px)}#cube .face15{transform:rotateY(288deg) rotateX(-11deg) rotate(120deg) translateZ(120px)}#cube.show-1{transform:translateZ(-60px) rotateY(-50deg) rotateX(-38deg) rotate(35deg)}#cube.show-2{transform:translateZ(-60px) rotateY(170deg) rotateX(5deg) rotate(-60deg)}#cube.show-3{transform:translateZ(-60px) rotateY(-144deg) rotateX(-8deg) rotate(-6deg)}#cube.show-4{transform:translateZ(-60px) rotateY(76deg) rotateX(135deg) rotate(-62deg)}#cube.show-5{transform:translateZ(-60px) rotateY(118deg) rotateX(-53deg) rotate(-35deg)}#cube.show-6{transform:translateZ(-60px) rotateY(-75deg) rotateX(135deg) rotate(65deg)}#cube.show-7{transform:translateZ(-60px) rotateY(-37deg) rotateX(187deg) rotate(185deg)}#cube.show-8{transform:translateZ(-60px) rotateY(-50deg) rotateX(-153deg) rotate(75deg)}#cube.show-9{transform:translateZ(-60px) rotateY(-73deg) rotateX(-175deg) rotate(15deg)}#cube.show-10{transform:translateZ(-60px) rotateY(51deg) rotateX(-42deg) rotate(-41deg)}#cube.show-11{transform:translateZ(-60px) rotateY(-50deg) rotateX(-220deg) rotate(-37deg)}#cube.show-12{transform:translateZ(-60px) rotateY(-10deg) rotateX(-4deg) rotate(-120deg)}#cube.show-13{transform:translateZ(-60px) rotateY(35deg) rotateX(4deg) rotate(-177deg)}#cube.show-14{transform:translateZ(-60px) rotateY(-296deg) rotateX(72deg) rotate(30deg)}#cube.show-15{transform:translateZ(-60px) rotateY(-238deg) rotateX(129deg) rotate(40deg)}#cube.show-16{transform:translateZ(-60px) rotateY(-254deg) rotateX(-136deg) rotate(113deg)}#cube.show-17{transform:translateZ(-60px) rotateY(-37deg) rotateX(8deg) rotate(175deg)}#cube.show-18{transform:translateZ(-60px) rotateY(-50deg) rotateX(25deg) rotate(288deg)}#cube.show-19{transform:translateZ(-60px) rotateY(-72deg) rotateX(4deg) rotate(352deg)}#cube.show-20{transform:translateZ(-60px) rotateY(50deg) rotateX(-220deg) rotate(38deg)}.cube-container:after{content:"";display:block;position:relative;width:380px;height:380px;top:15px;margin-left:-96px;background:radial-gradient(ellipse at center,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 50%);transform:scaleY(.3)}#cube.rolling{animation:rollDice 3s cubic-bezier(.25,1,.5,1)}@keyframes rollDice{0%{transform:translateZ(-60px) rotateY(0deg) rotateX(0deg) rotate(0deg)}to{transform:translateZ(-60px) rotateY(4turn) rotateX(4turn) rotate(4turn)}}