Día 3: Efecto espejo con CSS3 y JS

Este efecto está hecho utilizando la librería jQuery para ahorrarme un par de minutos. El efecto que trato de recrear es el de un espejo, puedes probarlo haciendo clic en el siguiente botón.

El "mouse invertido" está realizado con un mouse falso agregado después de .everything, que es el contenedor que voltearemos. Esto para evitar que ese elemento también sea invertido en algún sentido y pueda ser libre en todo el canvas.

#mouse {
  position: absolute;
  width: 10px;
  height: 10px;
  width: 12px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAB9UlEQVR42o2SMWgaURjHr8oFjQYSqQRixIIYteBQEBTrIC5SEKWDSseGLiW0wSkqKBJcAsWpSyLSwUHBRambgosurXTRlqRisGkHM2SQLt7de5f+L1yEQHvpH34c3/e+/3vfe/cxDMNcgEPwiPkfmUwm3m63f9doNGmE2/caotEoLZVKXDAYPEV4BB4qGhKJBB2Px2Kj0RD0ev0MqeeAVTRMJhMRotPpVPB4PF9VKtVbLG0oGq4hQRDEer3O+f3+L1h6CQyKBkgkhIitVkvwer2fsfwKaJQMS5XLZd7hcPRYln2CMu29Bp7naafT4cxmcxdlL8CaokFujxaLRd7tdrdR+gys/PUO0rfdbpN0Ok0ymczC6XT+RvFHEFwaKKXibDaj3W6XSKZsNsuj4Ay8k0fnADxdGvr9PsXL0FQqRdG/mMvlOHnXTaCWecCEw2HabDZJPB7/hUQ1EAjUqtXqYjAY8LFY7FytVsfv/A+j0cj5fL6fOp1OmqPHYC+ZTF7N53OxUCgQrVYr5e03u8v6BI6BQ46taK1Uq9XIcDgkVqt1iNxrsH5rYG+e66728/n8AqNCXC6XgNkqIrelNMTbaPNDpVIhvV6PhEKhb8jtgtV/OtD7G7zY5Wg0IpFI5Id0N6BXOmXTYrG8t9lsnMFgOEG8I138DxGUPaezs99IAAAAAElFTkSuQmCC);
  display: none;
}

El data en background-image utilizado devuelve la siguiente imagen: .

El siguienté bloque de código se encarga de realizar el efecto de mouse en espejo.

$(document).mousemove(function (e) {
  $("#mouse").css({
    'top': e.pageY,
    'right': e.pageX
  })
});

Y por último, el siguiente bloque de código se encarga de darle la vuelta en el eje Y a .everything.

var elem = $(".everything");
$({deg: 0}).animate({deg: 180}, // Animará de 0 a 180 grados en 500 milisegundos a .everything
  {
    duration: 500,
    step: function (now) {
      elem.css({
        transform: "rotateY(" + now + "deg)"
      });
  }
});

Parece raro pero parece ser que a los elementos con position: fixed; no les gusta ser transformados porque pierden la propiedad de alguna manera.

Y listo, un efecto bastante inútil pero si le encuentras un uso deja un comentario. Y si no, también deja un comentario.


palabras / Compartir en: Facebook , Twitter o copiar enlace