Ultimate Useless Machine en Css parte 3

En el artículo de Ultimate Useless Machine en Css parte 2 la Useless Machine ya tenía las transformaciones necesarias para las posiciones de encendido y apagado.

Vamos a usar las pseudoclases CSS para poder accionar la máquina. Queremos que funcione al hacer click sobre el interruptor. Por lo tanto los cambios que queramos tienen que estar en un segmento CSS como el siguiente:

#interrptor:active{
//CSS diferenciador cuando se pulsa el
interruptor
}

La pseudoclase :active añade su CSS cuando hacemos click con el ratón al elemento. El código real sería:

#interrptor:active{
-moz-transform: rotate(0deg);
-webkit-transform:
rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}

Lo que hacemos es deshacer el giro inicial del interruptor. Ahora tenemos un momento más difícil. ¿Cómo hacemos en CSS, para que al activar el interruptor lo que cambie sean las propiedades de otro elemento? Aunque parezca imposible sin javascript, si se puede, siempre que lo que queremos modificar sea descendiente o hermano del elemento que activa la acción, creo que un evento en un hijo no puede modificar propiedades del padre en CSS.

En este caso los demás elementos a modificar (percutor y tapa) son hermanos del interruptor, todos forman parte del div de la máquina como hijos directos. Así que podemos seleccionarlos con el selector (+). Así por ejemplo cuando queramos que la tapa se mueva al accionar el interruptor el selector será:

#interruptor:active + #tapa{
-moz-transform: rotate(45deg);
-webkit-transform:
rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

Lo que estamos diciendo es que queremos modificar del elemento interruptor, cuando esté activo a su hermano tapa. Aunque no solo estamos diciendo que sea su hermano, sino su hermano adyacente. Es decir justo el siguiente elemento. Así que si hacemos #interruptor:active + #allen no seleccionaremos el percutor, ya que no es adyacente al interruptor, pero lo podemos hacer navegando a través de la tapa:

#interruptor:active + #tapa + #allen{
-moz-transform: rotate(-90deg);

-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}

El ir recorriendo muchos elementos para llegar a uno que ya tenía un identificador inicialmente es ineficiente. Desde luego con javascript este tipo de eventos sobre un objeto que afectan a otro se hacen de forma más fácil y eficiente. Pero como experimento para hacer la máquina inútil solo usando CSS, esto funciona. El resultado final es:

#contenedorMaquina5{ width: 400px; height: 300px; margin-left: auto; margin-right: auto; }

#maquina5{ z-index:10; width: 395px; float: left; position: absolute; margin-top: 100px;}

#tapa5{ z-index:9; margin: 116px 0 0 184px; position: absolute; float: left; width: 211px;

-moz-transform-origin: 100% 100%;

-webkit-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

transform-origin: 100% 100%; }

#allen5{ float: left; position: absolute; z-index:2; margin: 110px 0 0 120px;

}

#interruptor5{ float: left; position: absolute; z-index:3; margin: 70px 0 0 157px; cursor: pointer;

-moz-transform: rotate(-30deg);

-moz-transform-origin: 50% 100%;

-webkit-transform: rotate(-30deg);

-webkit-transform-origin: 50% 100%;

-o-transform: rotate(-30deg);

-o-transform-origin: 50% 100%;

-ms-transform: rotate(-30deg);

-ms-transform-origin: 50% 100%;

transform: rotate(-30deg);

transform-origin: 50% 100%;

}

#interruptor5:active{

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

#interruptor5:active + #tapa5 + #allen5{

-moz-transform: rotate(-90deg);

-webkit-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

transform: rotate(-90deg);

}

#interruptor5:active + #tapa5{

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

En la próxima entrega haremos las animaciones y ya será una máquina inútil completa en CSS.