Efecto de escala y rotación en CSS3

Vamos a aprender a crear un efecto de escala y rotación en CSS3 sobre una imagen sin necesidad de ningún plugin externo, con lo cual ahorraremos bastantes líneas de código y mejoraremos la velocidad de carga de nuestra página. ¡Vamos a ello!

Efecto de escala y rotación en CSS3

Realizar un pequeño zoom y rotación sobre una imagen cuando el usuario pasa por encima con el cursor del ratón nos genera una mejor experiencia de navegación, además de un diseño más elegante.

Existen múltiples opciones para realizar este efecto, pero como os comentaba anteriormente vamos a prescindir de plugins externos, y lo haremos con CSS puro.

Menú de Navegación Adaptable con Rotación

El Html

Comenzamos como de costumbre con nuestro archivo html. Crearemos tres cajas con nuestras imágenes y le aplicaresmos las clases title1, title2 y title3 para procesarlas con CSS.

<figure class="snip1581"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample4.jpg" alt="profile-sample2"/>
  <figcaption>
    <h3 class="title1">Fotos</h3>
    <h3 class="title2">Verano</h3>
    <h3 class="title3">Colección</h3>
  </figcaption><a href="#"></a>
</figure>
<figure class="snip1581"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample13.jpg" alt="profile-sample7"/>
  <figcaption>
    <h3 class="title1">VIAJES</h3>
    <h3 class="title2">Invierno</h3>
    <h3 class="title3">Colección</h3>
  </figcaption><a href="#"></a>
</figure>
<figure class="snip1581"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample9.jpg" alt="profile-sample6"/>
  <figcaption>
    <h3 class="title1">Eventos</h3>
    <h3 class="title2">Primavera</h3>
    <h3 class="title3">Colección</h3>
  </figcaption><a href="#"></a>
</figure>

El CSS3

Aquí crearemos nuestro efecto de escala y rotación en CSS3.

@import url(https://fonts.googleapis.com/css?family=Poppins:300,700);
.snip1581 {
  font-family: 'Poppins:400,700', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 250px;
  max-width: 310px;
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snip1581 * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.snip1581 img {
  max-width: 100%;
  vertical-align: top;
}
.snip1581 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.snip1581 h3 {
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 3px 0;
}
.snip1581 .title1 {
  font-weight: 700;
}
.snip1581 .title2 {
  color: #a58e7c;
  font-weight: 300;
}
.snip1581 .title3 {
  font-weight: 700;
  font-size: 25px;
}
.snip1581 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1581:hover img,
.snip1581.hover img {
  -webkit-transform: scale(1.3) rotate(5deg);
  transform: scale(1.3) rotate(5deg);
}
/* Demo purposes only */body {
  background-color: #212121;
  text-align: center;
}

Conclusión

Como véis es muy fácil crear un efecto de rotación y zoom sobre una imagen únicamente con CSS3.

Prescindimos del uso de librerías externas para evitar ralentizar nuestra web y mejorar su rendimiento en general.

Para finalizar os recomendaría que no utilizarais el copiar y pegar para este ejemplo. Teclea el código y ve los resultados poco a poco, así aprenderás a interpretarlo y poder incluso mejorarlo.

¿Te ha resultado de utilidad? Déjame tus dudas o sugerencias en los comentarios o redes sociales, y no olvides compartir para que tus amigos aprendan también. ¡Gracias!