cube with switches

<head>
<meta charset="UTF-8">
<style>
* { box-sizing: border-box; }

body { font-family: sans-serif; }

.scene {
width: 300px;
height: 300px;

margin: 80px;
perspective: 600px;
}

.cube {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-150px);
transition: transform 1s;
}

.cube.show-front { transform: translateZ(-150px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-150px) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-150px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-150px) rotateY( 90deg); }
.cube.show-top { transform: translateZ(-150px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-150px) rotateX( 90deg); }

.cube__face {
position: absolute;
width: 300px;
height: 300px;
border: 2px solid black;
line-height: 300px;
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(150px); }
.cube__face--right { transform: rotateY( 90deg) translateZ(150px); }
.cube__face--back { transform: rotateY(180deg) translateZ(150px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(150px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(150px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(150px); }

label { margin-right: 10px; }
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back"><div id="front"></div></div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div></div>

<!-- partial -->
<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>
<script>var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.radio-group');
var currentClass = '';

function changeSide() {
var checkedRadio = radioGroup.querySelector(':checked');
var showClass = 'show-' + checkedRadio.value;
if ( currentClass ) {
cube.classList.remove( currentClass );
}
cube.classList.add( showClass );
currentClass = showClass;
}
// set initial side
changeSide();

radioGroup.addEventListener( 'change', changeSide );</script>

</body>
</html>