Como rotar y hacer girar imágenes con CSS. Animación

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:

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.

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.

#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.

Rotar imagen 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.




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.