Transformaciones CSS - translate
Cómo aplicar a ciertos elementos la propiedad "transform: translate(x,y)" para moverlos desde el punto de origen.
Las principales transformaciones que existen y las que empezaremos a ver en esta entrada son:
translate - Permite mover cierto elemento de su lugar de origen.
scale - Aplica un efecto de zoom.
rotate - Se utiliza para rotar, girar.
transform: translate
-webkit-transform: translate(a,b); /* Chrome y Safari */
-moz-transform: translate(a,b); /* Firefox */
-o-transform: translate(a,b); /* Opera */
-ms-transform: translate(a,b); /* Internet Explorer */
}
El valor a corresponde a la traslación horizontal y el valor b a la traslación vertical.
Veamos el siguiente ejemplo para poder comprenderlo mejor:
Al contenedor .ejemplo1 se le aplicó:
width:120px;
padding:20px;
background:#0000FF;
color:#FFF;
border:1px solid #000059;
}
.ejemplo1:hover {
-webkit-transform: translate(30px,0); /* Chrome y Safari */
-moz-transform: translate(30px,0); /* Firefox */
-o-transform: translate(30px,0); /* Opera */
-ms-transform: translate(30px,0); /* Internet Explorer */
}
Veamos este otro ejemplo, ahora utilizando transiciones.
width:150px;
padding:20px;
background:#0000FF;
color:#FFF;
border:1px solid #000059;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.ejemplo2:hover {
-webkit-transform: translate(20px,15px); /* Chrome y Safari */
-moz-transform: translate(20px,15px); /* Firefox */
-o-transform: translate(20px,15px); /* Opera */
-ms-transform: translate(20px,15px); /* Internet Explorer */
}
Con esto concluimos transformación translate. Nos vemos la próxima, seguramente con otra propiedad del CSS3.
no se desliza "suavemente"
ResponderEliminarEs porque la velocidad de la transición es rápida. Sólo debes editar la velocidad en transition:Xs; en un valor más alto para "suavizar" la transición. Espero que puedas aplicar este truco, ugo grondona. Saludos :)
Eliminargracias me sirvio de muchoo !!!
ResponderEliminar