Desde hace tiempo circulan por internet vídeos y webs donde se venden Useless Machine, también conocidas como “Leave me alone box” o “Ultimate Machine”. Comencemos por un vídeo de una de ellas para saber como funciona.
Es tan simple como eso, la máquina solo sirve para apagarse a si misma cuando la enciendes. Partiendo de esta base y aprovechando las animaciones y transformaciones gráficas de CSS3 vamos a intentar construir una Useless Machine que funcione usando CSS, sin poner ni una línea de javascript.
Primero el modelo. Con unas imágenes de madera, un interruptor, una llave allen con cabeza de martillo y un poco de photoshop gimp. Debido al movimiento de las piezas necesitamos 4 imágenes:
- Caja con la base del interruptor.
- Tapa de la caja
- Interruptor
- Percutor interno.
Vamos a colocar las imágenes dentro de un div centrado. Cada imagen estará flotando a la izquierda y colocaremos con margenes su posición para que todo quede en su sitio. Se da un identificador a cada imagen para poder animarlas posteriormente. También hay que poner bien los z-index, para que unas imágenes tapen a otra, por ejemplo el percutor está dentro de la caja, solo debería verse cuando la tapa está abierta.
Así el código para la colocación inicial es:
#contenedorMaquina{ width: 400px;height: 300px; margin-left: auto; margin-right: auto; }
#maquina{ z-index:10; width: 395px;float: left; position: absolute; margin-top: 100px; }
#tapa{ z-index:9; margin: 116px 0 0 184px; position: absolute; float: left; width: 211px; }
#allen{ float: left; position: absolute; z-index:2; margin: 110px 0 0 120px; }
#interruptor{ float: left; position: absolute; z-index:3; margin: 70px 0 0 157px; cursor: pointer; }Y el resultado es este:
#contenedorMaquina{ width: 400px; height: 300px; margin-left: auto; margin-right: auto; }
#maquina{ z-index:10; width: 395px; float: left; position: absolute; margin-top: 100px;}
#tapa{ z-index:9; margin: 116px 0 0 184px; position: absolute; float: left; width: 211px; }
#allen{ float: left; position: absolute; z-index:2; margin: 110px 0 0 120px; }
#interruptor{ float: left; position: absolute; z-index:3; margin: 70px 0 0 157px; cursor: pointer; }
El interruptor está en la posición de encendido, tendremos que poner una transformación inicial para que comience apagado. El percutor no se ve, porque está dentro de la caja, pero está ahí. En la siguiente entrada haremos las transformaciones para que quede en la posición de la acción de apagarse.
Deja tu comentario