Lavadora con animacion realizada con CSS3

Como ya os he comentado en varias ocasiones, las posibilidades que nos dan los estilos CSS cada vez son mayores y por eso os presento este pequeño experimento para que lo veais 'in situ'. Podeis ver que se trata de una lavadora que esta realizada integramente usando codigo CSS3, sin utilizar ningun tipo de imagen, que ademas cuenta con 2 animaciones al pasar el cursor sobre ella: se abre la puerta del tambor y se enciende la lucecita roja de puesta en marcha. Si te ha gustado y quieres saber el codigo que he utilizado, lo puedes ver al final de este articulo, si te lo quieres descargar, puedes hacerlo haciendo click aqui.

ver el codigo de la lavadora

<center><div class="lavadora"><div class="puerta"></div><div class="tambor"></div><div class="bandeja"></div><div class="selector"></div><div class="botones"></div><div class="luzroja"></div></div></center>
<style>
/* lavadora */
.lavadora {
    position: relative;height: 380px;
    width: 290px;
    border-top: 14px solid #97BDAF;border-left:1px solid #97BDAF;
    border-right:1px solid #97BDAF;border-bottom:1px solid #97BDAF;
    border-radius: 4px;
    background-color: #E4F2ED;
}
.lavadora:before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 20px;
    left: 50%;
    margin-left: -145px;
    width: 290px;
    height: 20px;
    box-shadow: 0 20px 40px 30px rgba(0, 0, 0, 0.15);
}
.lavadora:after {
    position: absolute;
    content: "";
    bottom: 15px;
    left: 15px;
    width: 70px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #B1CBC2;
}
/* puerta */
.lavadora .puerta {
    position: absolute;
    top: 90px;
    left: 50%;
    margin-left: -97px;
    width: 150px;
    height: 150px;
    border: 22px solid #97BDAF;
    border-radius: 97px;
    background-image: linear-gradient(to bottom, rgba(73, 96, 88, 0.85) 0%, rgba(87, 115, 105, 0.85) 100%);
    transform: translateZ(0);
    animation: close 0.5s ease-in 0s 1 forwards;
}
/* abriendo la puerta */
.lavadora:hover .puerta {
    transform: translateZ(0);
    animation: open 0.5s ease-in 0s 1 forwards;
}
/* abriendo la puerta animacion */
@keyframes open {
    from {
        transform: perspective(1000px) rotateY(0deg);
        transform-origin: 0% 0%;
    }
    to {
        transform: perspective(1000px) rotateY(-105deg);
        transform-origin: 0% 0%;
    }
}
/* cerrando la puerta animacion */
@keyframes close {
    from {
        transform: perspective(1000px) rotateY(-105deg);
        transform-origin: 0% 0%;
    }
    to {
        transform: perspective(1000px) rotateY(0deg);
        transform-origin: 0% 0%;
    }
}
/* tambor*/
.lavadora .tambor{
    position: absolute;
    top: 113px;cursor:pointer;
    left: 50%;
    margin-left: -74px;
    width: 140px;
    height: 140px;
    border: 4px solid #97BDAF;
    border-radius: 97px;
    background:#3A4E47;
}
.lavadora .tambor:after {
    position: absolute;
    content: "";
    top: 63px;
    left: -27px;
    width:10px;
    height: 16px;
    background-color: #6D8C81;
    border-radius: 2px;
}
.lavadora .puerta:before {
    position: absolute;
    content: "";
    top: 60px;
    right: -14px;
    width: 18px;
    height: 28px;
    background-color: #6D8C81;
    border-radius: 2px;
}
/* bandeja */
.lavadora .bandeja {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 90px;
    height: 25px;
    border-top: 10px solid #C0D9D0;
    background-color: #97BDAF;
    border-radius: 2px;
}
.lavadora .selector {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 20px;
    height: 20px;cursor:pointer;
    background-color: #97BDAF;
    border: 5px solid #C0D9D0;
    border-radius: 15px;
}
/* botones */
.lavadora .botones,
.lavadora .botones:before,
.lavadora .botones:after {
    position: absolute;
    top: 22px;
    right: 60px;
    width: 10px;
    height: 15px;cursor:pointer;
    background-color: #97BDAF;
    border-radius: 2px;
}
.lavadora .botones:before,
.lavadora .botones:after {
    content: "";
    top: 0;
}
.lavadora .botones:before { right: 15px; }
.lavadora .botones:after { right: 30px; }
/* luz roja */
.lavadora .luzroja {
    position: absolute;
    top: 28px;
    right: 110px;
    width: 4px;
    height: 4px;
    background-color: #9E0004;
    border-radius: 2px;
}

.lavadora:hover .luzroja{
    background-color: #DB0006;
    box-shadow: 0 0 5px 1px rgba(211, 5, 11, 0.4);
}

</style>