NorfiPC
NorfiPC » Códigos » Girar imágenes con CSS

Como rotar y hacer girar las imágenes usando CSS


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
Como animar y hacer que gire de forma infinita cualquier imagen u otro objeto en una página web, agregando reglas en una hoja de estilo interna CSS. Códigos de ejemplo para copiar.
Como rotar y hacer girar las imágenes usando CSS
Icono de un engranaje Icono de un engranaje
Mediante el lenguaje CSS abreviatura de Cascading Style Sheets (hojas de estilo en cascada), es posible cambiar el estilo de cualquier página y hacerla más atractiva.
Personalizar a nuestro gusto el tamaño de las fuentes, su estilo, el color y muchas otras opciones.
También es posible rotar y hacer girar las imágenes estáticas u otros objetos, sin tener que usar gift, flash u otros elementos animados.
En esta página mostramos como hacerlo, para los que desean hacer más interesante y original el contenido que publican en internet.



Como hacer que gire de forma infinita una imagen con CSS


Para hacer girar una imagen o cualquier otro objeto necesitamos agregar la regla "keyframes rotate", especificando con selectores propiedades y su valor.
No es nada difícil, aun si no posees experiencia en el lenguaje CSS, podrás habilitar esta función en cualquier página de tu blog o sitio web, solo copiando, pegando y modificando algunos valores.
A continuación mostramos el código usando para animar los dos engranajes que se muestran en el encabezado de esta página, explicamos cada función, además como posicionarlos.



Código CSS usado para girar dos imágenes


Para hacer que giren los dos engranajes, que son dos imágenes independientes de nombre "engranaje1.png" y "engranaje2.png", en esta página usamos el siguiente código dentro de las etiquetas <style></style>.
<style>
@keyframes rotate {from {transform: rotate(0deg);}
to {transform: rotate(360deg);}}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}}
.imgr{
-webkit-animation: 3s rotate linear infinite;
animation: 3s rotate linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#imgr2 {
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
</style>
Se usan dos reglas para asegurar la compatibilidad con los navegadores:
@keyframes rotate – Navegadores Firefox e Internet Explorer.
@-webkit-keyframes rotate – Navegadores que usan WebKit (Google Chrome, Safari)



Valores que se pueden modificar


En la propiedad "animation" se usan los siguientes valores que se pueden modificar:
3s – Intervalo en segundos de la rotación
rotate – Tipo de animación
linear – Tipo de movimiento
infinite – Duración de la animación



Como posicionar las imágenes


Para situar las dos imágenes de los engranajes en el lugar exacto, debemos posicionarlas de la siguiente forma:
#imgr1{position:relative;left:50px;top:-160px;}
#imgr2{position:relative;left:16px;top:-230px;}
Estos valores dependen del tamaño de las imágenes que se empleen y su posición en la página.
Para encontrar más información detallada sobre las reglas, selectores, propiedades y valores usados en CSS, lee la siguiente página de nuestro sitio: Tutorial y manual básico del uso de los estilos CSS en las páginas web

Otras páginas relacionadas



Síguenos en las redes sociales


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio



 
 
Inicio | Mapa del sitio | Sobre mí | RSS