Cubo Curioso efecto CSS

Vemos una curiosa y bonita creación de movimiento de un cubo con sus letras con un poco de código css, html y JS.
Para conseguir esto solo se necesita añadir un bloque de código (Code Block) en y meter en sus correspondientes lenguajes el código que se muestra abajo.
frente
detras
derecha
izquierda
arriba
abajo

Código CSS
body { font-family: sans-serif; } .scene { width: 300px; height: 200px; border: 1px solid #CCC; margin: 80px; perspective: 400px; } .box { width: 300px; height: 200px; position: relative; transform-style: preserve-3d; transform: translateZ(-50px); transition: transform 1s; } .box.show-frente { transform: translateZ( -50px) rotateY( 0deg); } .box.show-detras { transform: translateZ( -50px) rotateY(-180deg); } .box.show-derecha { transform: translateZ(-150px) rotateY( -90deg); } .box.show-izquierda { transform: translateZ(-150px) rotateY( 90deg); } .box.show-arriba { transform: translateZ(-100px) rotateX( -90deg); } .box.show-abajo { transform: translateZ(-100px) rotateX( 90deg); } .box__face { position: absolute; border: 2px solid black; font-size: 40px; font-weight: bold; color: white; text-align: center; } .box__face--frente, .box__face--detras { width: 300px; height: 200px; line-height: 200px; } .box__face--derecha, .box__face--izquierda { width: 100px; height: 200px; left: 100px; line-height: 200px; } .box__face--arriba, .box__face--abajo { width: 300px; height: 100px; top: 50px; line-height: 100px; } .box__face--frente { background: hsla( 0, 100%, 50%, 0.7); } .box__face--derecha { background: hsla( 60, 100%, 50%, 0.7); } .box__face--detras { background: hsla(120, 100%, 50%, 0.7); } .box__face--izquierda { background: hsla(180, 100%, 50%, 0.7); } .box__face--arriba { background: hsla(240, 100%, 50%, 0.7); } .box__face--abajo { background: hsla(300, 100%, 50%, 0.7); } .box__face--frente { transform: rotateY( 0deg) translateZ( 50px); } .box__face--detras { transform: rotateY(180deg) translateZ( 50px); } .box__face--derecha { transform: rotateY( 90deg) translateZ(150px); } .box__face--izquierda { transform: rotateY(-90deg) translateZ(150px); } .box__face--arriba { transform: rotateX( 90deg) translateZ(100px); } .box__face--abajo { transform: rotateX(-90deg) translateZ(100px); } label { margin-right: 10px; }
Código HTML
<div class="scene"> <div class="box"> <div class="box__face box__face--frente">frente<<div> <div class="box__face box__face--detras">detras</div> <div class="box__face box__face--derecha">derecha<<div> <div class="box__face box__face--izquierda">izquierda</div> <div class="box__face box__face--arriba">arriba</div> <div class="box__face box__face--abajo">abajo</div> </div> </div> <p class="radio-group"> <label> <input type="radio" name="rotate-cube-side" value="frente" checked /> frente </label> <label> <input type="radio" name="rotate-cube-side" value="derecha" /> derecha </label> <label> <input type="radio" name="rotate-cube-side" value="detras" /> detras </label> <label> <input type="radio" name="rotate-cube-side" value="izquierda" /> izquierda </label> <label> <input type="radio" name="rotate-cube-side" value="arriba" /> arriba </label> <label> <input type="radio" name="rotate-cube-side" value="abajo" /> abajo </label> </p>
Código JS

var box = document.querySelector('.box'); var radioGroup = document.querySelector('.radio-group'); var currentClass = ''; function changeSide() { var checkedRadio = radioGroup.querySelector(':checked'); var showClass = 'show-' + checkedRadio.value; if ( currentClass ) { box.classList.remove( currentClass ); } box.classList.add( showClass ); currentClass = showClass; } // set initial side changeSide(); radioGroup.addEventListener( 'change', changeSide );
databasefile-emptyrocketthumbs-uplayers