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

Como rotar y hacer girar las imágenes usando CSS



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
Mostramos los códigos en esta página usando el tema Doxy de Prettify, un proyecto para resaltar el código en páginas web, disponible gratis en Github.
Lee más información detallada: Crear snipetts adaptables para mostrar código fuente en las páginas



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



Rotar imágenes con CSS3


En algunos casos no necesitamos hacer girar las imágenes, sino rotarlas determinado ángulo.
Podemos hacerlo con CSS usando la propiedad "transform".
Debemos emplear "-ms-transform" para los navegadores Internet Explorer y Edge y "-webkit-transform" para Chrome, Safari y Opera.
Con JavaScript podemos emplear: object.style.transform="rotate(Xdeg)"
A continuación mostramos tres ejemplos diferentes.

Rotar una imagen 90 grados con CSS

En este ejemplo rotamos la imagen 90 grados, usando solo CSS.
Icono de una camara
#cam1{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
El código usado en el estilo CSS es el anterior y en la etiqueta de la imagen usamos el identificador (ID) cam1



Rotar una imagen 180 grados con un botón

En el siguiente ejemplo usamos un botón para rotar la imagen 180 grados a petición del usuario.
Para eso necesitamos usar una función en JavaScript.
Icono de una camara

El código usado es el siguiente:
<script>
function rotate(value)
{
document.getElementById('cam2').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('cam2').style.msTransform="rotate(" + value + "deg)";
document.getElementById('cam2').style.transform="rotate(" + value + "deg)";
}
</script>
<button type="button" onclick="rotate(180)" class="btn2">Rotar imagen</button>



Rotar imagen con un control de deslizar

En el siguiente ejemplo usamos un control de deslizar, para poder rotar la imagen en cualquier ángulo. Algo similar al anterior usamos CSS y JavaScript.

Icono de una camara


transform: rotate(0deg);
El código usado es el siguiente:
<script>
function rotate2(value)
{
document.getElementById('cam3').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('cam3').style.msTransform="rotate(" + value + "deg)";
document.getElementById('cam3').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>
<input type="range" min="-360" max="360" value="0" onchange="rotate2(this.value)">
transform: rotate(<span id="span1">0deg</span>);
Los que poseen conocimientos elementales de CSS y JavaScript, podrán implementar fácilmente estos útiles efectos en cualquier página web.

Otras páginas relacionadas



Buscar en este sitio


Comparte esta página




Sígueme en las redes sociales








Comenta o lee lo que otros opinan
 
Inicio | Mapa del sitio | Sobre mí | RSS