var cube = document.querySelector('.cube'); var radioGroup = document.querySelector('.radio-group'); var currentClass = ''; var showClass = ''; function changeSide() { var checkedRadio = radioGroup.querySelectorAll('input'); while(currentClass == showClass || showClass == undefined) { var randomValue = Math.floor(Math.random() * 5); showClass = 'show-' + checkedRadio[randomValue].value; } if ( currentClass ) { cube.classList.remove( currentClass ); } cube.classList.add( showClass ); currentClass = showClass; } // set initial side setInterval(changeSide, 500); /* changeSide(); */ radioGroup.addEventListener( 'change', changeSide );
<div class="scene"> <div class="cube"> <div class="cube__face cube__face--front">1</div> <div class="cube__face cube__face--back">2</div> <div class="cube__face cube__face--right">3</div> <div class="cube__face cube__face--left">4</div> <div class="cube__face cube__face--top">5</div> <div class="cube__face cube__face--bottom">6</div> </div> </div> <p class="radio-group"> <label> <input type="radio" name="rotate-cube-side" value="front" checked /> front </label> <label> <input type="radio" name="rotate-cube-side" value="right" /> right </label> <label> <input type="radio" name="rotate-cube-side" value="back" /> back </label> <label> <input type="radio" name="rotate-cube-side" value="left" /> left </label> <label> <input type="radio" name="rotate-cube-side" value="top" /> top </label> <label> <input type="radio" name="rotate-cube-side" value="bottom" /> bottom </label> </p>
@keyframes dice { 0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg); } 50% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg); } 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); } } * { box-sizing: border-box; } body { font-family: sans-serif; } .scene { width: 200px; height: 200px; border: 1px solid #CCC; margin: 80px; perspective: 400px; } .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); transition: transform .5s cubic-bezier(0.025,0.025,0.025,0.9); /* animation: dice 2s infinite linear; */ } .cube.show-front { transform: translateZ(-100px) rotateY( 0deg); } .cube.show-right { transform: translateZ(-100px) rotateY( -90deg); } .cube.show-back { transform: translateZ(-100px) rotateY(-180deg); } .cube.show-left { transform: translateZ(-100px) rotateY( 90deg); } .cube.show-top { transform: translateZ(-100px) rotateX( -90deg); } .cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); } .radio-group { display:none; } .cube__face { position: absolute; width: 200px; height: 200px; border: 2px solid black; line-height: 200px; font-size: 40px; font-weight: bold; color: white; text-align: center; } .cube__face--front { background: hsla( 0, 100%, 50%, 0.7); } .cube__face--right { background: hsla( 60, 100%, 50%, 0.7); } .cube__face--back { background: hsla(120, 100%, 50%, 0.7); } .cube__face--left { background: hsla(180, 100%, 50%, 0.7); } .cube__face--top { background: hsla(240, 100%, 50%, 0.7); } .cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); } .cube__face--front { transform: rotateY( 0deg) translateZ(100px); } .cube__face--right { transform: rotateY( 90deg) translateZ(100px); } .cube__face--back { transform: rotateY(180deg) translateZ(100px); } .cube__face--left { transform: rotateY(-90deg) translateZ(100px); } .cube__face--top { transform: rotateX( 90deg) translateZ(100px); } .cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); } label { margin-right: 10px; }