Google+ Efecto de rotación mediante CSS3 - rotate - tutorial - Miopiblog

miércoles, 20 de febrero de 2013

Efecto de rotación mediante CSS3 - rotate - tutorial

En este tutorial te voy a enseñar como crear un efecto de rotación de 360º y aplicarlo a un div, imagen o elemento html, mediante la propiedad rotate de CSS3. Voy a crear un estilo mediante CSS3, el cual hará que una imagen gire 360º, desplazándose un poco hacia la derecha al mismo tiempo. Una manera bastante elegante de mostrar fotografías, o algún div con contenido en su interior. Puedes ver un ejemplo de imagen rotando 360º mediante CSS3 a continuación, es decir el ejmplo de lo que vamos a hacer:


Imgen test rotate

¿Has visto que bien queda? ¿te gusta? venga, pues te voy a enseñar como se hace. Lo primero de todo es crear una clase de estilo CSS3, para posteriormente aplicar ésta a la imagen u elemento html al que queremos aplicar la propiedad rotate de CSS3, para hacer que gire 360º.


.rotacion {
/*Aquí va el resto de código css*/
}

Ahora que ya hemos decidido que nuestra clase para hacer rotar 360º la imagen, se va a llamar .rotacion, solo nos queda crear el resto de código CSS. A continuación te lo muestro comentado, para que lo entiendas bien:


.rotacion {
              -moz-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    -ms-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    -o-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    -webkit-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    cursor:pointer;/*El cursor adopta forma de mano normalmente, al situarse encima de la imagen*/
    box-shadow: 0 0 10px #f00;/*Definimos la sombra. En este caso, es de color rojo y se difumina 10pixeles*/
   -webkit-box-shadow: 0 0 10px #f00;
   -moz-box-shadow: 0 0 10px #f00;
}

Acabamos de definir el estado que tendrá la imagen cuando esté estable o quieta. Ahora, vamos a indicar, también mediante CSS3, que debe hacer la imagen cuando el cursor del ratón se sitúa sobre ella. Para ello vamos a utilizar la seudoclase :hover de css y la propiedad y valor: transform:rotate de CSS3. Creamos el siguiente código CSS:


.rotacion:hover {
                margin-left: 200px;/*Separamos la imagen un poco de la izquierda al mismo tiempo que gira*/
-moz-transform:rotate(-360deg);/*Comenzamos a aplicar el valor rotate de la transormacion*/
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
            box-shadow: 0 0 15px #0026ff;/*Sombra difuminada 15 pixeles de color azul*/
   -webkit-box-shadow: 0 0 15px #0026ff;
   -moz-box-shadow: 0 0 15px #0026ff;
}

Perfecto! ahora solo falta aplicar el estilo mediante las etiquetas <style>y </style> o mediante un vínculo a una hoja de estilo en cascada, en la que previamente habrás introducido el código CSS que hemos creado, e introducir la imagen con la clase asignada en el documento html. Para introducir la imagen, debes crear una etiqueta html como la siguiente:


<img alt="Imagen test rotate" title="Imagen de prueba css3" class="rotacion" src="http://files.posicionindex.webnode.es/system_preview_detail_200000000-cc322cd2b7-public/portada%20-%20Mi%20web%20en%20Google%20en%205%20horas%20SEO.JPG" />

¿has visto que fácil? ya está, ya has aprendido a crear y aplicar un efecto de rotación de 360º a una imagen, div u elemento html, mediante CSS3.
Por cierto, parece que te gusta estar a la última en todo esto de Html5 y CSS3, verdad? si te apetece, puedes echar un vistazo a este tutorial y aprender a crear un menú horizontal básico mediante html5 y CSS3. Puede que también te interese leer algo que he escrito, sobre como crear una web mediante html5, o aprender a crear un formulario mediante html5 y CSS3.
Si lo prefieres, puedes echar un vistazo a este link y visualizar mis últimos artículos y tutoriales sobre CSS3.

Por cierto, no te olvides de seguirme en las redes sociales, así estarás siempre al día sobre nuevas publicaciones en Miopiblog. Ups! por poco se me olvida... si te interesa el libro de la imagen de ejemplo, debes saber que es obra mía. Mediante éste, te enseño a indexar y posicionar un nuevo sitio web en Google de manera rápida y efectiva. Visitando el siguiente link, puedes saber algo más acerca de este libro de posicionamiento y SEO, aunque si buscas en Google, "comprar libro seo" el enlace al sitio web aparece en la primera posición de la primera página de resultados de búsqueda orgánica : ) .

Un saludo y espero que te haya gustado el tutorial ; ).

Seguidores (seguir blog)

Me siguen en google plus: