Con este tutorial podremos girar, rotar cualquier elemento en nuestro sitio web.
Lo haremos utilizando codigo CSS3, una imagen o cualquier otro elemento que desemos.
Vamos a utilizar el codigo anterior de como agregar bordes y sombras a nuestras imagens por si no lo han visto aqui les dejo el link Agregar bordes y sombras a imagen con CSS
Les agregare el codigo y al final les explico mas detallado como funciona nuestro codigo.
CSS
*
{
margin:0;
padding:0;
}
body
{
background: #cecece;
}
.girar
{
transition: 2.5s ease;
-moz-transition: 2.5s ease; /* Firefox */
-webkit-transition: 2.5s ease; /* Chrome - Safari */
-o-transition: 2.5s ease; /* Opera */
}
.girar:hover
{
transform : rotate(360deg);
-moz-transform : rotate(360deg); /* Firefox */
-webkit-transform : rotate(360deg); /* Chrome - Safari */
-o-transform : rotate(360deg); /* Opera */
}
INDEX
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css">
<title>..:: Girar cualquier elemento ::..</title>
</head>
<body>
<img src="rueda.png" class="girar" width="400" hight="400">
</body>
</html>
.girar es una clase y se reconoce porque se le antepone un punto
-moz-, -webkit- y -o-, son prefijos utilizados para que el estilo sea reconocido en cada navegador.
2.5s, los segundos que durará la rotación(puedes modificarlo a gusto).
ease, el tipo de rotación, la animación al rotar empieza lentamente, aumenta de velocidad y termina lentamente(el valor ease viene por defecto, así que puedes no colocarlo si lo deseas).
.girar:hover al agregarle a la clase hover esto indica que cuando pase el mouse ensima de la imagen o el elemento aga el efecto
Los prefijos -moz-, -webkit- y -o- indican que el estilo se aplica a un navegador determinado, igual que en el estilo anterior.
rotate(360deg), rotate indica que rotarás la imagen en 360 grados(puedes modificar este valor y probar una media rotación por ejemplo: 180) y deg indica que se está usando degrees o grados sexagesimales.
Aquí el ejemplo funcionando (para ver el efecto, pasa el puntero del mouse sobre la rueda)
Prueben el ejemplo
No hay comentarios :
Publicar un comentario