Introducción a CSS3 (Parte 2)

SOLUCIÓN

A lgunas indicaciones:

 Lo único que tienes que hacer es aplicar una transformación al elemento aside compuesta
por rotar + desplazar. Esto debe hacerse durante el estado hover:

aside:hover {
transform: translate(-10px, 25px) rotate(-15deg);
}

 Fíjate que se utiliza la propiedad transform junto a los operadores translate y rotate.
Para translate tienes que indicar el desplazamiento horizontal y vertical (en este caso se
mueve hacia la izquierda y hacia abajo); y para rotate, simplemente el ángulo de rotación.

 Además, la transición se incluirá en la regla del estado normal (en negrita se indica lo
que se ha añadido):

aside {
float: left;
width: 220px;
color: #ffffff;
background-color: #5C6429;
padding: 10px;
margin-right: 20px;
transition: transform 1s ease;
}

 Fíjate que la propiedad que se verá afectada por la transición es justamente la

transformación anterior. Se utiliza el método ease para que conseguir una desaceleración
gradual.

 Finalmente, si añades las mismas reglas pero con el selector universal:

* {
transition: transform 1s ease;
}
*:hover {
transform: translate(-10px, 25px) rotate(-15deg);
}

 El resultado es simplemente espectacular ya que la transformación y transición se

aplican a cada uno de los elementos de la página al situar el puntero del ratón por encima
de ellos. Recuerda eliminar estas dos últimas reglas, ya que hacen prácticamente inservible
la página aunque, eso sí, ¡seguro que sorprenderás a más de una persona!

Diseño web avanzado - HTML5 y CSS3

Copyright (c) Computer Aided Elearning, S.A.