Código de CSS - Rotar una imagen en CSS3

Imágen de perfil

Rotar una imagen en CSS3gráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 23 de Enero del 2013 por Xavi
11.213 visualizaciones desde el 23 de Enero del 2013. Una media de 56 por semana
Simple código que muestra como rotar una imagen con CSS3. Explica el funcionamiento y las posibilidades de "transition".

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 23 de Enero del 2013gráfica de visualizaciones de la versión: Versión 1
11.215 visualizaciones desde el 23 de Enero del 2013. Una media de 56 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #logo {
            margin:100px;
            -webkit-transition: all .6s ease-in-out;    /* safari - Chrome*/
            -moz-transition: all .6s ease-in-out;       /* Firefox */
            -o-transition: all .6s ease-in-out;         /* Opera */
            transition: all .6s ease-in-out;
        }
        #logo:hover    {
            -webkit-transform: rotate(360deg);  /* safari - Chrome*/
            -moz-transform: rotate(360deg);     /* Firefox */
            -o-transform: rotate(360deg);       /* Opera */
            transform: rotate(360deg);
        }
    </style>
</head>
 
<body>
<img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg" id="logo">
<p style='white-space: pre;'>
<b>transition</b>:
    - all => Es el valor por defecto. Determina la propiedad de la transicion
             Puede ser all|none|nombre de la propiedad (Ejemplo la anchra: width)
    - .6s => Determina la duración de la transicion. En este caso son 0.6 segundos
    - ease-in-out => especifica el efecto de la transición... los tipos que hay son:
        - linear: La transición es la misma al iniciar que al finalizar
        - ease: La transición es lenta al iniciar, luego rapido y al finalizar muy lento
        - ease-in: La transición es lenta al iniciar
        - ease-out: La transición es lenta al finalizar
        - ease-in-out: La transición es lenta al iniciar y al finalizar
        - cubic-bezier(n,n,n,n): Define los valores para la transición van desde
            el 0 al 1
</p>
</body>



Comentarios sobre la versión: Versión 1 (1)

abigail
26 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
Hola Muchas gracias por la ayuda, podrias decirme si hay alguna forma en que la transicion comiense por si sola, no solo pasando en mouse sobre la imagen , gracias !!
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2280