Transformaciones CSS - rotate

Ya vimos anteriormente las transformaciones:

• scale y
• translate

Ahora volvamos a trabajar con la propiedad -transform: rotate.
Acá tenemos algunos ejemplos en los que tenemos una misma imagen, pero se les aplican diferentes valores de transformación.

rotate(5deg)

rotate(-5deg)

rotate(180deg)

rotate(90deg)

rotate(-90deg)

Veamos el código que utilizamos para aplicar rotación en las imágenes.

.ejemplo1 {
-webkit-transform:scale(1) rotate(xdeg);
-moz-transform:scale(1) rotate(xdeg);
-o-transform:scale(1) rotate(xdeg);
-ms-transform:scale(1) rotate(xdeg);
}

Sólo hay que reemplazar la X por el valor que quieras. Hay que tener en cuenta que

• Si el valor es positivo, el elemento rotará hacia la derecha.
• Si es negativo, girará hacia la izquierda.

Veamos un último ejemplo aplicando la transformación con :hover

ahora viceversa

Veamos el CSS

Ejemplo 6

.ejemplo6 {
width:300px;
background:white;
padding:6px;
border:1px solid #e9e9e9; /* Borde */
-webkit-box-shadow:0 0 8px #e9e9e9;  /* Sombra */
-moz-box-shadow:0 0 8px #e9e9e9;
-o-box-shadow:0 0 8px #e9e9e9;
-ms-box-shadow:0 0 8px #e9e9e9;
-webkit-transition:.6s; /* Transición */
-moz-transition:.6s;
-o-transition:.6s;
-ms-transition:.6s;
}
.ejemplo6:hover {
-webkit-transform: rotate(-30deg);  /* Rotación */
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transition:1s;  /* Transición */
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;}
}

Ejemplo 7

.ejemplo7 {
width:300px;
background:white;
padding:6px;
border:1px solid #e9e9e9; /* Borde */
-webkit-box-shadow:0 0 8px #e9e9e9;  /* Sombra */
-moz-box-shadow:0 0 8px #e9e9e9;
-o-box-shadow:0 0 8px #e9e9e9;
-ms-box-shadow:0 0 8px #e9e9e9;
-webkit-transform: rotate(-30deg);  /* Rotación */
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transition:.6s; /* Transición */
-moz-transition:.6s;
-o-transition:.6s;
-ms-transition:.6s;
}
.ejemplo6:hover {
-webkit-transform: rotate(0deg);  /* Rotación */
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transition:1s;  /* Transición */
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;}
}

Eso es todo. En el siguiente tutorial sobre transformaciones CSS veremos cómo combinar todas las transformaciones que vimos, para lograr sorprendentes efectos en las imágenes y contenedores. Hasta la próxima.