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) { /* let randomValue = Math.floor(Math.random() * 5); showClass = 'show-' + checkedRadio[randomValue].value; */ cube.style.transform = setMatrix(); showClass = 'show-' + document.querySelector('input[type="radio"]:checked').value; } if ( currentClass ) { cube.classList.remove( currentClass ); } cube.classList.add( showClass ); currentClass = showClass; } // set initial side /* changeSide(); setInterval(changeSide, 4000); */ radioGroup.addEventListener( 'change', changeSide ); function setMatrix() { const style = window.getComputedStyle(cube) const matrix = style.transform || style.webkitTransform || style.mozTransform // Can either be 2d or 3d transform const matrixType = matrix.includes('3d') ? '3d' : '2d' const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ') /* if (matrixType === '3d') { const x = matrixValues[12]; const y = matrixValues[13]; const z = matrixValues[14]; console.log( { x: matrixValues[12], y: matrixValues[13], z: matrixValues[14], matrix: matrix } ); } */ return matrix; }
<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="roll" checked /> roll </label> <label> <input type="radio" name="rotate-cube-side" value="stop" checked /> stop </label> <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 diceRoll { 0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg); } 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); } } @keyframes diceStop { 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); } } @keyframes diceFront { 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); } } @keyframes diceRight { 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(270deg); } } @keyframes diceBack { 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(180deg); } } @keyframes diceLeft { 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(450deg); } } @keyframes diceTop { 100% { transform: translateZ(-100px) rotateX(270deg) rotateY(360deg); } } @keyframes diceBottom { 100% { transform: translateZ(-100px) rotateX(450deg) rotateY(360deg); } } * { box-sizing: border-box; } body { font-family: sans-serif; background-color:#20262E; } .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 2s ease; } .cube.show-roll { animation: diceRoll 1s infinite linear; } .cube.show-roll:hover { animation-play-state: paused; } .cube.show-stop { animation: diceStop .5s forwards linear;} .cube.show-front { animation: diceFront .5s forwards linear; } .cube.show-right { animation: diceRight .5s forwards linear; } .cube.show-back { animation: diceBack .5s forwards linear; } .cube.show-left { animation: diceLeft .5s forwards linear; } .cube.show-top { animation: diceTop .5s forwards linear; } .cube.show-bottom { animation: diceBottom .5s forwards linear; } .radio-group { } .cube__face { position: absolute; width: 200px; height: 200px; border: 2px solid black; line-height: 200px; font-size: 100px; font-weight: bold; color: white; text-align: center; } .cube__face--front { background: black; } .cube__face--right { background: black; } .cube__face--back { background: black; } .cube__face--left { background: black; } .cube__face--top { background: black; } .cube__face--bottom { background: black; } .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; }