Transformaciones CSS3 – Trasladar

Esta entrada fue publicada en CSS, Diseño Web el por .

El día de hoy experimenté un poco con las transformaciones en CSS3.  Estas me permiten añadir una perspectiva a los elementos HTML. también podemos trabajar nuestros elementos en 2D  o 3D. Por lo general, todos nuestros elementos son rectangulares  (Un círculo está dentro de un rectángulo invisible no?), por que podemos trabajar cada una de las transformaciones que nos  brinda CSS3 con total facilidad.

Hoy vamos a trabajar la  traslación. Esta es simplemente mover un elemento de una posición (Xo, Yo) a otra posición (X,Y). Y lo vamos a hacer tanto en 2D como en 3D.

Traslación en 2D (Translate)

Para esto vamos a ver un ejemplo

CSS

.cuadro{
    background:#333;
    border:2px solid #333;
    display:block;
    height:60px;
    margin-bottom:20px;
    transition: all 1s ease-in-out;
    width:100px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
}

.cuadro:hover {
    transform: translate(150px, 45px);
    -ms-transform: translate(150px, 45px); /* IE 9 */
    -webkit-transform: translate(150px, 45px); /* Safari y Chrome */
    -moz-transform: translate(150px, 45px); /* Firefox */
}

Creamos un estilo para un cuadro y lo que vamos a hacer es animarlo para ver la traslación. Para la animación utilizamos transition. Como la lucha entre navegadores continua, para cada uno de los motores es necesario colocar el respectivo código. para Opera se puede utilizar -webkit.

Para la traslación utilizamos translate con dos parámetros, las coordenadas en  x,  y a donde vamos a colocar el cuadro.

HTML

<p>trasladar:</p>
<div class="cuadro"></div>

Aquí es muy sencillo, se coloca  un div con  la clase cuadro y listo!

Ver  ejemplo en funcionamiento

Traslación en 3D

Ahora lo que vamos a hacer es trasladar al  cuadro en los tres ejes  (x, y, z). Para esto utilizaremos   translate3D . Aquí va el CSS

CSS

.cuadro{
    background:#333;
    border:2px solid #333;
    display:block;
    height:100px;
    margin-bottom:20px;
    transition: all 1s ease-in-out;
    width:100px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
}

.cuadro:hover {
    transform: translate3D(150px, 45px, 45px); /* en x,y,z */
    -ms-transform: translate3D(150px, 45px, 45px); /* IE 9 */
    -webkit-transform: translate3D(150px, 45px, 45px); /* Safari y Chrome */
    -moz-transform: translate3D(150px, 45px, 45px); /* Firefox */
}

y ahora el html,

HTML

<p><p>Trasladación 3D:</p>
<div class="cuadro"></div>

 Ver  ejemplo en funcionamiento

Traslación en los diferentes ejes X, Y ,  Z

También se puede hacer  traslación en cada uno de los ejes. Para esto se utiliza translateXtranslateY y  translateZ.  Aquí solamente se coloca el valor de la traslación del eje respectivo. Para  esto vamos a hacer un ejemplo.

.cuadro1,.cuadro2,.cuadro3{
    background:#333;
    border:2px solid #333;
    display:block;
    height:50px;
    margin-bottom:20px;
    transition: all 1s ease-in-out;
    width:50px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
}

.cuadro1:hover {
    transform: translateX(150px);
    -ms-transform: translateX(150px); /* IE 9 */
    -webkit-transform: translateX(150px); /* Safari y Chrome */
    -moz-transform: translateX(150px); /* Firefox */
}
.cuadro2:hover {
    transform: translateY(150px);
    -ms-transform: translateY(150px); /* IE 9 */
    -webkit-transform: translateY(150px); /* Safari y Chrome */
    -moz-transform: translateY(150px); /* Firefox */
}
.cuadro3:hover {
    transform: translateZ(150px);
    -ms-transform: translateZ(150px); /* IE 9 */
    -webkit-transform: translateZ(150px); /* Safari y Chrome */
    -moz-transform: translateZ(150px); /* Firefox */
}

Aquí la traslación se lleva dependiendo del eje. Si es en el  eje X , el cuadro se moverá 150px hacia la  derecha. En el caso  del eje Y, se moverá hacia abajo 150px. Para el caso del eje Z, no se nota la traslación porque se mueve hacia afuera de la pantalla.

Aquí veremos entonces  el código HTML

HTML

<p>Trasladación 3D:</p>
<div class="cuadro1"></div>
<div class="cuadro2"></div>
<div class="cuadro3"></div>

 Ver ejemplo en funcionamiento

Un pensamiento en “Transformaciones CSS3 – Trasladar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>