Ultimate Useless Machine en Css parte 2

Esta es la segunda parte de cómo construir una máquina inútil en CSS. Podemos recordar lo que es una Useless Machine y qué habíamos hecho en la primera parte.

 

Hasta ahora lo que teníamos es la máquina parada y con el botón de encender en la posición equivocada, está ya encendido (hacia la derecha) y debería estar apagado (hacia la izquierda):

 

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

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

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

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

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

 

 

 

Para que el botón mire a la izquierda vamos a usar una transformación 2D de rotación. (Ya hicimos un artículo sobre estas rotaciones:
https://www.tictacsoluciones.com/blog/transformaciones-css3-girar-una-imagen/
.Allí veíamos además de las transformaciones CSS3, el método para Internet Explorer (6-8), en esta ocasión no vamos a cubrir Internet Explorer hasta la versión 9, porque necesitamos una modificación de las transformaciones que es el origen.

 

No es lo mismo rotar una imagen 90º desde su esquina superior izquierda, que desde su esquina superior derecha. Para eso sirve cambiar el origen. En el caso de la palanca de la máquina, necesitamos que gire respecto a la base de la palanca, es decir abajo y centrado. Podemos especificar el origen como un % del objeto. Si deseamos que esté a la mitad horizontalmente y abajo del todo en vertical deberíamos especificar un origen: 50% 100%; El código CSS completo con un giro de 30º y ese origen sería:

 

#interruptor{
-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%;
}

 

En realidad solo son 2 instrucciones, una para la transformación y otra para cambiar el origen (por defecto 50%, 50’%, centro del objeto), pero la repetimos para cada prefijo de navegador. Si aplicamos esto al artefacto inicial obtenemos:

 

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

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

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

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

#interruptor3{ 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%; }

 

 

 

Con esto tendríamos la posición inicial de la máquina preparada para ser usada. La posición final tendría cambios en 3 piezas. El interruptor volvería a la posición encendido (es decir, quitar el giro que hemos hecho aquí arriba), el percutor interno tiene que girar 90º en sentido contrario a las agujas del reloj para parecer que golpea el interruptor, este giro puede ser respecto a su centro, así que no hay que cambiar el origen de la transformación. La tapa de la caja tiene que abrirse, con una rotación de 45º, pero respecto a su esquina inferior derecha (es decir origen 100% 100%). El estado de la máquina con estas 3 transformaciones es:

 

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

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

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

-moz-transform: rotate(45deg);

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

-webkit-transform: rotate(45deg);

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

-o-transform: rotate(45deg);

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

-ms-transform: rotate(45deg);

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

transform: rotate(45deg);

transform-origin: 100% 100%; }

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

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

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

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

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

transform: rotate(-90deg);

}

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

 

 

 

Ahora ya tenemos las transformaciones que hacen falta para la posición inicial y final de la máquina, en la próxima entrada comenzaremos a animar la Useless Machine.