Efecto Hover 3D de capas solo con CSS

En esta entrada vamos a ver cómo crear un efecto hover en 3D con capas utilizando solo HTML y CSS. Para ello simularé que al pasar el ratón por encima descomponemos el diseño de una página web en diferentes profundidades, separando las capas que lo componen y rotándolas unos grados.

Lo primero que vamos a hacer es crear un div que contendrá las imágenes y al que aplicaremos una clase llamada, en un alarde de originalidad, capas. En su interior ubicaremos todas las imágenes que formarán el efecto hover. A cada una le aplicaremos una clase diferente para poder identificarlas individualmente y aplicarles los estilos correspondientes.

<div class="capas">
  <img src="https://www.tualojamiento.com/images/web-capa-0.png" class="capa0">
  <img src="https://www.tualojamiento.com/images/web-capa-1.png" class="capa1">
  <img src="https://www.tualojamiento.com/images/web-capa-2.png" class="capa2">
  <img src="https://www.tualojamiento.com/images/web-capa-3.png" class="capa3">
  <img src="https://www.tualojamiento.com/images/web-capa-4.png" class="capa4">
  <img src="https://www.tualojamiento.com/images/web-capa-5.png" class="capa5">
</div>

Después pasaremos a definir los estilos de la composición. Primero asignaremos al div contenedor un position: relative, su ancho máximo con max-width: 650px y margin: auto para centrar la capa. En segundo lugar le diremos a todas las imágenes de su interior que tengan position: absolute para que todas ellas se superpongan en profundidad unas encima de otras y se adapten a la capa contenedora con max-width: 100%. Es en este punto donde activaremos las animaciones con transition: all ease 1250ms, que a continuación definiremos de manera individual en cada imagen.

Como nos interesa que las animaciones se reproduzcan al pasar el ratón, usaremos la pseudo-clase :hover sobre el div contenedor y aplicaremos las propiedades una a una a cada capa de imagen. Usaremos transform para poder especificar que modificaremos las perspectiva, rotación y traslación de cada elemento para ajustarlo a nuestra necesidades.

Este sería todo el CSS comentado anteriormente, puedes copiarlo para hacer tus propios experimentos, verás que cambiando los parámetros de transformación puedes hacer diversos tipos de animaciones.

.capas {
  position: relative;
  max-width: 650px;
  margin: auto;
}
.capas img {
  position: absolute;
  max-width: 100%;
  transition: all ease 1250ms;
}
.capas:hover .capa0 {
  transform: perspective(2000px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(-30px) translateY(0px) translateZ(0px);
}
.capas:hover .capa1 {
  transform: perspective(2000px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(-30px) translateY(0px) translateZ(40px);
  opacity: .6;
}
.capas:hover .capa2 {
  transform: perspective(2000px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(-30px) translateY(0px) translateZ(80px);
}
.capas:hover .capa3 {
  transform: perspective(2000px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(-30px) translateY(0px) translateZ(120px);
}
.capas:hover .capa4 {
  transform: perspective(2000px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(-30px) translateY(0px) translateZ(160px);
}
.capas:hover .capa5 {
  transform: perspective(2000px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(-30px) translateY(0px) translateZ(200px);
}

Este es el resultado final en acción con el que puedes interactuar e incluso editarlo en tiempo real desde mi CodePen. Como maquetador web freelance puedo decir que es un efecto de lo más atractivo para incorporar a una página web.

See the Pen Efecto Hover 3D de capas con CSS by Jesús Tovar (@jesustovar) on CodePen.

Si ya eres diseñador de páginas web y estás acostumbrados a utilizar Sass en tus proyectos, aquí tienes una versión del código para este preprocesador.

// Mixin
=transform($transZ)
  transform: perspective(2000px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(-30px) translateY(0px) translateZ($transZ)

// Estilos
body
  background-color: #cccccc

  h1
    text-align: center

  .capas 
    position: relative
    max-width: 650px
    margin: 0 auto
    img 
      position: absolute
      max-width: 100%
      transition: all ease 1250ms
      transform-style: preserve-3d
    &:hover 
      img.capa0
        +transform(0px)
      img.capa1 
        +transform(40px)
        opacity: .6
      img.capa2 
        +transform(80px)
      img.capa3 
        +transform(120px)
      img.capa4 
        +transform(160px)
      img.capa5 
        +transform(200px)