Como rotar una imagen efecto rotate en CSS

CSS(Cascading Style Sheets) es un lenguaje utilizado en la presentación de documentos HTML, en la arquitectura de modelo-vista-control podemos decir que es el responsable de la vista por tal motivo de la presentación y aspecto de una página web. Este lenguaje es fundamentalmente utilizado por los diferentes navegadores como Chrome, Firefox, Opera, IE entre otros, y por aquellos programadores que utilizan esta herramienta para obtener una gran variedad de presentaciones,que incluyen cambio de tamaños de las fuentes, colores, tipos, etc.
Cuando hablamos del modelo nos referimos a la estructura del documento HTML, para poder decirlo de una forma simple su contenido, y el CSS el maquillaje que nos va a permitir ver de diferentes formas ese contenido, la principal ventaja de poder separar el modelo de la vista es que fácilmente podemos modificar el aspecto de una página web, si tenemos todo mezclado en un mismo código realizar cambios puede volverse una tarea muy tediosa.

Aplicar efectos CSS a una bola para animarla

1-Entramos al panel de Diseño>Edicion HTML>Sin expandir plantillas de artilugios

2-Buscar con Ctrl+F: ]]></b:skin>

3-Justo antes de ]]></b:skin> pegar el código CSS3.

Código CSS

#cambiar_texto{
width:550px;
height:100px;
border-radius:20px;
text-align:center;
background-color:#0C6;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
font-style:oblique;
font-weight:bold;
}
#cambiar_texto:hover{
text-transform:uppercase;
background-color:#CC3;
}

#idayvuelta{
display:block;
position:absolute;
border-radius:25px;
margin-left:10px;
width:50px;
height:50px;
background-color:#F13;
-webkit-animation:giro 3s infinite alternate;
-moz-animation:giro 3s infinite alternate;
-ms-animation:giro 3s infinite alternate;
-o-animation:giro 3s infinite alternate;
animation:giro 3s infinite alternate;

}

@keyframes "giro" {
0% {
left:0%;
transform:rotate(0deg);
}

  100%{
left:35%;
transform:rotate(360deg);
background-color:#FFF;
  }
 }


 @-webkit-keyframes "giro" {
0% {
-webkit-transform:rotate(0deg);
  left:0%;
}


100%{
-webkit-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }


 @-moz-keyframes "giro" {
0% {
-moz-transform:rotate(0deg);
  left:0%;
}


100%{
-moz-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }

@-o-keyframes "giro" {
0% {
-o-transform:rotate(0deg);
  left:0%;
}


100%{
-o-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }

@-ms-keyframes "giro" {
0% {
-ms-transform:rotate(0deg);
  left:0%;
}


100%{
-ms-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }

Una breve explicación

Hay dos identificadores que son los encargados de los efectos:

#cambiar_texto:hover{}  modifica el texto convirtiendo el texto a mayúsculas al pasar el ratón por sobre el texto.
#idayvuelta{} establece el color, tamaño de la bola, tiempo de recorrido de la bola  y llama al keyframe "giro" que mediante transform:rotate se encarga de girar el cuerpo 360 grados en este caso en 3s.

Si se prefiere adicionar de fondo una imagen se puede reemplazar en #idayvuelta{}:

background-color:#F13;

Por la siguiente sentencia donde hay que indicar una ruta de acceso a la imagen:

background-image:url(../Optimizacion%20de%20imagenes/PRUEBAIMAGEN.jpg);

Luego en tu plantilla podrás aplicar los identificadores por ejemplo a un div de la siguiente manera:

<div id="idayvuelta"></div>

Incompatibilidades

Algunas de las funcionalidades de CSS pueden no ser compatibles con todos los navegadores, por tal motivo hay que indicar para cada navegador determinados prefijos como:

@-webkit-keyframes  Chrome
@-ms-keyframes IE
@-o-keyframes   Opera
@-moz-keyframes  Firefox

Efectos CSS, pasar el mouse sobre la bola

Esta es solo una simple muestra de las múltiples opciones que podemos manejar con CSS.

Tweet