Haciendo pruebas para un proyecto, he desarrollado un dado sólo con HTML y CSS (sin JavaScript u otra tecnología). El sistema es sencillo: una serie de radio buttons y labels que simulan la tirada de un dado al intercambiar posiciones y cada vez que se pulsan dan un valor "aleatorio".
Aquí se puede ver una versión mínima del código:
@keyframes changeOrder {
from { z-index: 6;}
to { z-index: 1; }
}
@-webkit-keyframes changeOrder {
from { z-index: 6; }
to { z-index: 1; }
}
label {
display: block;
position: absolute;
display: block;
width: 50px;
height: 50px;
line-height:50px;
background: #eeeeee;
text-align: center;
animation: changeOrder 1.2s infinite;
}
label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.2s; }
label:nth-of-type(3) { animation-delay: -0.4s; }
label:nth-of-type(4) { animation-delay: -0.6s; }
label:nth-of-type(5) { animation-delay: -0.8s; }
label:nth-of-type(6) { animation-delay: -1.0s; }
<input type="radio" name="cb" id="cb1" value="1"/>
<input type="radio" name="cb" id="cb2" value="2"/>
<input type="radio" name="cb" id="cb3" value="3"/>
<input type="radio" name="cb" id="cb4" value="4"/>
<input type="radio" name="cb" id="cb5" value="5"/>
<input type="radio" name="cb" id="cb6" value="6"/>
<label for="cb1">1</label>
<label for="cb2">2</label>
<label for="cb3">3</label>
<label for="cb4">4</label>
<label for="cb5">5</label>
<label for="cb6">6</label>
El problema es que, aunque visualmente se ve el dado rotando, no siempre que se pulsa en el label
se activa el checkbox asociado en el for
. Unas veces sí se marca y otras no. Lo que me hace pensar que el problema puede ser por la animación usada (he jugado con los tiempos para ver si eso solucionaba el problema, pero más o menos parece mantenerse igual).
¿Por qué puede ocurrir esto? ¿Cómo puedo solucionarlo?