<!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>
Crear cuenta
Comentarios sobre la versión: Versión 1 (1)