dice2.css

.dice__scene{width:70px;height:70px;-webkit-perspective:210px;perspective:210px}#dice__cube{position:relative;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-35px);transform:translateZ(-35px);-webkit-transition:-webkit-transform ease;transition:-webkit-transform ease;transition:transform ease;transition:transform ease,-webkit-transform ease;-webkit-transition-duration:.5s;transition-duration:.5s}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube{-webkit-transform-style:flat;transform-style:flat;-webkit-transform:none!important;transform:none!important}}@-webkit-keyframes showSameFont{100%{-webkit-transform:translateZ(-35px) rotateY(360deg);transform:translateZ(-35px) rotateY(360deg)}}@keyframes showSameFont{100%{-webkit-transform:translateZ(-35px) rotateY(360deg);transform:translateZ(-35px) rotateY(360deg)}}@-webkit-keyframes showSameRight{100%{-webkit-transform:translateZ(-35px) rotateY(-450deg);transform:translateZ(-35px) rotateY(-450deg)}}@keyframes showSameRight{100%{-webkit-transform:translateZ(-35px) rotateY(-450deg);transform:translateZ(-35px) rotateY(-450deg)}}@-webkit-keyframes showSameBack{100%{-webkit-transform:translateZ(-35px) rotateY(-540deg);transform:translateZ(-35px) rotateY(-540deg)}}@keyframes showSameBack{100%{-webkit-transform:translateZ(-35px) rotateY(-540deg);transform:translateZ(-35px) rotateY(-540deg)}}@-webkit-keyframes showSameLeft{100%{-webkit-transform:translateZ(-35px) rotateY(450deg);transform:translateZ(-35px) rotateY(450deg)}}@keyframes showSameLeft{100%{-webkit-transform:translateZ(-35px) rotateY(450deg);transform:translateZ(-35px) rotateY(450deg)}}@-webkit-keyframes showSameTop{100%{-webkit-transform:translateZ(-35px) rotateX(-450deg);transform:translateZ(-35px) rotateX(-450deg)}}@keyframes showSameTop{100%{-webkit-transform:translateZ(-35px) rotateX(-450deg);transform:translateZ(-35px) rotateX(-450deg)}}@-webkit-keyframes showSameBottom{100%{-webkit-transform:translateZ(-35px) rotateX(450deg);transform:translateZ(-35px) rotateX(450deg)}}@keyframes showSameBottom{100%{-webkit-transform:translateZ(-35px) rotateX(450deg);transform:translateZ(-35px) rotateX(450deg)}}#dice__cube.show-front{-webkit-transform:translateZ(-35px) rotateY(0);transform:translateZ(-35px) rotateY(0)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-front .dice__side--front{display:block}}#dice__cube.show-front.show-same{-webkit-animation:showSameFont .5s ease;animation:showSameFont .5s ease}#dice__cube.show-right{-webkit-transform:translateZ(-35px) rotateY(-90deg);transform:translateZ(-35px) rotateY(-90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-right .dice__side--right{display:block}}#dice__cube.show-right.show-same{-webkit-animation:showSameRight .5s ease;animation:showSameRight .5s ease}#dice__cube.show-back{-webkit-transform:translateZ(-35px) rotateY(-180deg);transform:translateZ(-35px) rotateY(-180deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-back .dice__side--back{display:block}}#dice__cube.show-back.show-same{-webkit-animation:showSameBack .5s ease;animation:showSameBack .5s ease}#dice__cube.show-left{-webkit-transform:translateZ(-35px) rotateY(90deg);transform:translateZ(-35px) rotateY(90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-left .dice__side--left{display:block}}#dice__cube.show-left.show-same{-webkit-animation:showSameLeft .5s ease;animation:showSameLeft .5s ease}#dice__cube.show-top{-webkit-transform:translateZ(-35px) rotateX(-90deg);transform:translateZ(-35px) rotateX(-90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-top .dice__side--top{display:block}}#dice__cube.show-top.show-same{-webkit-animation:showSameTop .5s ease;animation:showSameTop .5s ease}#dice__cube.show-bottom{-webkit-transform:translateZ(-35px) rotateX(90deg);transform:translateZ(-35px) rotateX(90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-bottom .dice__side--bottom{display:block}}#dice__cube.show-bottom.show-same{-webkit-animation:showSameBottom .5s ease;animation:showSameBottom .5s ease}.dice__side{position:absolute;width:100%;height:100%;background-size:100% auto;background-position:center;background-repeat:no-repeat;background-color:#fff;box-shadow:inset 0 0 7px rgba(0,0,0,.1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.dice__side{display:none;-webkit-transform:none!important;transform:none!important}}.dice__side--front{-webkit-transform:rotateY(0) translateZ(35px);transform:rotateY(0) translateZ(35px);background-image:url(assets/images/dice-1.png)}.dice__side--back{-webkit-transform:rotateY(180deg) translateZ(35px);transform:rotateY(180deg) translateZ(35px);background-image:url(assets/images/dice-6.png)}.dice__side--right{-webkit-transform:rotateY(90deg) translateZ(35px);transform:rotateY(90deg) translateZ(35px);background-image:url(assets/images/dice-4.png)}.dice__side--left{-webkit-transform:rotateY(-90deg) translateZ(35px);transform:rotateY(-90deg) translateZ(35px);background-image:url(assets/images/dice-3.png)}.dice__side--top{-webkit-transform:rotateX(90deg) translateZ(35px);transform:rotateX(90deg) translateZ(35px);background-image:url(assets/images/dice-2.png)}.dice__side--bottom{-webkit-transform:rotateX(-90deg) translateZ(35px);transform:rotateX(-90deg) translateZ(35px);background-image:url(assets/images/dice-5.png)}