Rotar varios elementos
Profesor: Javier López
Volver
Propuesta de la actividad
Rotación de las imágenes
Resultado final

Rotación de imágenes
Vamos a retomar index.html que dejamos en el módulo anterior y vamos a rotar ligeramente cada una de las tres imágenes centrales.
Como cada una va a tener una rotación diferente, cada imagen tiene que estar dentro de un <div> con un id diferente.

estilos.css
#imagen1{
   transform:rotate(-2deg);
   -webkit-transform:rotate(-2deg);
   -moz-transform:rotate(-2deg);
   -o-transform:rotate(-2deg);
   -ms-transform:rotate(-2deg);
}

#imagen2{
   transform:rotate(2deg);
   -webkit-transform:rotate(2deg);
   -moz-transform:rotate(2deg);
   -o-transform:rotate(2deg);
   -ms-transform:rotate(2deg);
}

#imagen3{
   transform:rotate(1deg);
   -webkit-transform:rotate(1deg);
   -moz-transform:rotate(1deg);
   -o-transform:rotate(1deg);
   -ms-transform:rotate(1deg);
}

Al no estar totalmente implementada la etiqueta transform es necesario utilizar los prefijos -webkit-, -moz-, -o- y -ms- para que funcione en todos los navegadores (excepto en Internet Explorer 6, 7, 8 y resto del siglo pasado).

transform: rotate(-2deg);aunque es la etiqueta oficial, -de momento- no funciona en ningún navegador (no obstante hay que añadirlo para que funcione cuando esté implementado).
El prefijo -webkit- consigue que funcione en navegadores Chrome y Safari.
El prefijo -moz- está orientado al navegador de Mozilla: FireFox.
El prefijo -o- provoca que transform funcione en el navegador Opera
El prefijo -ms- está orientado a las versiones modernas (a partir de 9) de Internet Explorer.

El <div> #imagen1 tiene una orientación de 2 grados hacia la izquierda.
El <div> #imagen2 tiene una orientación de 2 grados hacia la derecha.
El <div> #imagen3 tiene una orientación de 1 grado hacia la izquierda.

Haz clic aquí para .
En el siguiente tema empezaremos a montar la página de contacto con