LOGO QUE GIRA

Hola comunidad, buenas tardes

Tengo un problema, una tontería seguro, pero no doy con ello. HTML5 y CSS3.

Resulta que quiero hacer que el logo de una bitácora que estoy haciendo gire al pasar el ratón (como la de aquí de Cristalab, pero por alguna razón no soy capaz.

Después de luchar y desechar el intento de usar svg para dibujar el logo (por alguna extraña razón no se ponía flotante y me desplazaba el texto) decidí poner un png. Bueno, pues no hay forma de hacerlo girar, ni con animación, ni con transición (he intentado incluso cambiar la escala pero tampoco) el caso es que no consigo hacerle girar, he probado otra imágen no png pero tampoco funciona, el caso es que hay todo tipo de cosas del estilo en la página (animaciones, transiciones, transformaciones...)

Otra cosa, ya que estoy, a ver si saben decirme cómo puedo hacer que el logo, que es con fondo transparente, no tenga forma cuadrada, me explico, el logo es circular, y quiero ponerle una sombra que se desvanezca (como un parpadeo) cada x segundos, pero como tiene forma cuadrada la imágen aunque el logo es circular y con el fondo transparente, la sombra la pone a la imágen, al cuadrado... no se si me explico, si no me entienden poco un pantallazo.

Muchas gracias de antemano!!!!.

Suponiendo que tienes este código HTML:

Código HTML :

<div id="contenedor">
<div id="milogo">
   <img src="milogo.png" alt="Mi Logo" />
</div>
</div>

En el CSS puedes hacer algo como esto:

Código CSS :

#contenedor {
   position: relative;
}
#milogo {
   position: absolute;
   top: 0;
   left: 0;
   width: 227px; /* Debe coincidir con las dimensiones de la imagen */
   height: 228px; /* Debe coincidir con las dimensiones de la imagen */
   z-index: 3;
   transform-origin: 50% 50%;
   transition-property: transform;
   transition-duration: 4s;
   transition-timing-function: ease-in-out;
   -o-transform-origin: 50% 50%; /* Opera */
   -o-transition-property: -o-transform;
   -o-transition-duration: 4s;
   -o-transition-timing-function: ease-in-out;
   -moz-transform-origin: 50% 50%; /* Firefox */
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 4s;
   -moz-transition-timing-function: ease-in-out;
   -webkit-transform-origin: 50% 50%; /* Chrome y Safari */
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 4s;
   -webkit-transition-timing-function: ease-in-out;
   -ms-transform-origin: 50% 50%; /* IE */
   -ms-transition-property: -ms-transform;
   -ms-transition-duration: 4s;
   -ms-transition-timing-function: ease-in-out;
}
#milogo:hover {
   transform: rotate(90deg) scale(1.2);
   -o-transform: rotate(90deg) scale(1.2);
   -webkit-transform: rotate(90deg) scale(1.2);
   -moz-transform: rotate(90deg) scale(1.2);
   -ms-transform: rotate(90deg) scale(1.2);
}

Esto hará que la imagen gire 90 grados (rotate(90deg)) y se agrade 1,2 veces (scale(1.2)) en 4 segundos (transition-duration) usando el centro del elemento (transform-origin) cuando el puntero del mouse está sobre el elemento (:hover). Y regresará a su lugar cuando el puntero del mouse abandone el elemento. La transición usada será ease-in-out (transition-timing-function).

Puedes comenzar a experimentar con esto hasta lograr un efecto que te guste.

DriverOP

Perdón por tardar en contestar pero hasta ahora no lo pude probar. Funciona a la perfección ya hice las modificaciones para que quedara a mi gusto.

Muchísimas gracias!

Para servirte

Muchas gracias! lo voy a probar en mi sitio web

de hecho se puede hacer lo mismo sin necesidad de agregar dos div en html poniendo en css

Código CSS :

#milogo {
   position: relative;
   transform-origin: 50% 50%;
   transition-property: transform;
   transition-duration: 4s;
   transition-timing-function: ease-in-out;
   -o-transform-origin: 50% 50%; /* Opera */
   -o-transition-property: -o-transform;
   -o-transition-duration: 4s;
   -o-transition-timing-function: ease-in-out;
   -moz-transform-origin: 50% 50%; /* Firefox */
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 4s;
   -moz-transition-timing-function: ease-in-out;
   -webkit-transform-origin: 50% 50%; /* Chrome y Safari */
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 4s;
   -webkit-transition-timing-function: ease-in-out;
   -ms-transform-origin: 50% 50%; /* IE */
   -ms-transition-property: -ms-transform;
   -ms-transition-duration: 4s;
   -ms-transition-timing-function: ease-in-out;
   transform: rotate(-90deg) scale(1.2);
   -o-transform: rotate(-90deg) scale(1.2);
   -webkit-transform: rotate(-90deg) scale(1.2);
   -moz-transform: rotate(-90deg) scale(1.2);
   -ms-transform: rotate(-90deg) scale(1.2);
   
   }
#milogo:hover {
   position: relative;
   transform-origin: 50% 50%;
   transition-property: transform;
   transition-duration: 4s;
   transition-timing-function: ease-in-out;
   -o-transform-origin: 50% 50%; /* Opera */
   -o-transition-property: -o-transform;
   -o-transition-duration: 4s;
   -o-transition-timing-function: ease-in-out;
   -moz-transform-origin: 50% 50%; /* Firefox */
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 4s;
   -moz-transition-timing-function: ease-in-out;
   -webkit-transform-origin: 50% 50%; /* Chrome y Safari */
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 4s;
   -webkit-transition-timing-function: ease-in-out;
   -ms-transform-origin: 50% 50%; /* IE */
   -ms-transition-property: -ms-transform;
   -ms-transition-duration: 4s;
   -ms-transition-timing-function: ease-in-out;
   transform: rotate(90deg) scale(1.2);
   -o-transform: rotate(90deg) scale(1.2);
   -webkit-transform: rotate(90deg) scale(1.2);
   -moz-transform: rotate(90deg) scale(1.2);
   -ms-transform: rotate(90deg) scale(1.2);
}

@Mvkbeguelin... no tienes que poner todas las propiedades en el hover, solo el cambio que deseas

tenes razon pero igual funciona