CSS3 Transforms

CSS3 Transforms:
Las transformaciones en CSS3 ofrecen la posibilidad de añadir persepectiva a tus elementos HTML. Podemos usar las transformaciones CSS3 para disponer los elementos en un espacio 2D o 3D. HTML es generalmente una presentación lineal, todos los elementos son esencialmente rectángulos. Las transformaciones nos permiten aprovechar los diferentes planos para dar a nuestro "layout" cierta perspectiva. Hay dos tipos de transformaciones: 2D y 3D. Vamos a ver primero las transformaciones 2D:

• Skew: Define un sesgo 2D a lo largo de los ejes x e y.
• Scale: Proporciona un escalado 2D sobre los ejes x e y.
• Rotate: Proporciona una rotación 2D a un número de grados definido.
• Translate: Se traslada (o desplaza) el elemento a una posición definida 2D.

Vamos a ver un ejemplo:
CSS:

.caja{
 display:block;
    margin-bottom:20px;
    width:100px;
    height:60px;
 background:#ddd;
    border:2px solid #c8c8c8;
}
.caja_skew {
 transform: skew(30deg);
 -ms-transform: skew(30deg); /* IE 9 */
 -webkit-transform: skew(30deg); /* Safari y Chrome */
 -o-transform: skew(30deg); /* Opera */
 -moz-transform: skew(30deg); /* Firefox */
}
.caja_scale {
 transform: scale(1,0.5);
 -ms-transform: scale(1,0.5); /* IE 9 */
 -webkit-transform: scale(1,0.5); /* Safari y Chrome */
 -o-transform: scale(1,0.5); /* Opera */
 -moz-transform: scale(1,0.5); /* Firefox */
}
.caja_rotate {
 transform: rotate(15deg);
 -ms-transform: rotate(15deg); /* IE 9 */
 -webkit-transform: rotate(15deg); /* Safari y Chrome */
 -o-transform: rotate(15deg); /* Opera */
 -moz-transform: rotate(15deg); /* Firefox */
}
.caja_translate {
 transform: translate(125px, 15px);
 -ms-transform: translate(125px, 15px); /* IE 9 */
 -webkit-transform: translate(125px, 15px); /* Safari y Chrome */
 -o-transform: translate(125px, 25px); /* Opera */
 -moz-transform: translate(125px, 15px); /* Firefox */
}
.caja_rotate_skew_scale_translate {
 transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px);
 -ms-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* IE 9 */
 -webkit-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Safari y Chrome */
 -o-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Opera */
 -moz-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Firefox */
}

HTML:

<p>sesgar:</p>
 <div class="caja caja_skew"></div>
<p>escalar:</p>
 <div class="caja caja_scale"></div>
<p>rotar:</p>
 <div class="caja caja_rotate"></div>
<p>trasladar:</p>
 <div class="caja caja_translate"></div>
<p>rotar, sesgar, escalar y trasladar:</p>
 <div class="caja caja_rotate_skew_scale_translate"></div>

Ver ejemplo en funcionamiento » »
CSS3 transformaciones en 3D
Las transformaciones en 3D se implementan de manera similar a las transformaciones 2D, pero también tienes acceso a un tercer plano. A continuación vemos las opciones disponibles para las transformaciones 3D.

• translate3d: Traslada (o desplaza) el elemento a una posición 3D definida en los ejes x,y,z.
• scale3d: especifica una operación de escala 3D en los ejes x,y,z.
• rotateX: especifica una rotación hacia la derecha por el ángulo dado alrededor del eje x.
• rotateY: especifica una rotación hacia la derecha por el ángulo dado alrededor del eje y.
• rotateZ: especifica una rotación hacia la derecha por el ángulo dado alrededor el eje z.

Vamos a ver otro ejemplo.
CSS:

.caja{
 display:block;
    margin-bottom:20px;
    width:100px;
    height:60px;
 background:#ddd;
    border:2px solid #c8c8c8;
}
.caja_translate3d {
 transform: translate3d(75%, ?25%, 0);
 -ms-transform: translate3d(75%, ?25%, 0); /* IE 9 */
 -webkit-transform: translate3d(75%, ?25%, 0); /* Safari y Chrome */
 -o-transform: translate3d(75%, ?25%, 0); /* Opera */
 -moz-transform: translate3d(75%, ?25%, 0); /* Firefox */
}
.caja_scale3d {
 transform: scale3d(0.5, 1.25,1);
 -ms-transform: scale3d(0.5, 1.25,1); /* IE 9 */
 -webkit-transform: scale3d(0.5, 1.25,1); /* Safari y Chrome */
 -o-transform: scale3d(0.5, 1.25,1); /* Opera */
 -moz-transform: scale3d(0.5, 1.25,1); /* Firefox */
}
.caja_rotate_x {
 transform: rotateX(100deg);
 -ms-transform: rotateX(100deg); /* IE 9 */
 -webkit-transform: rotateX(100deg); /* Safari y Chrome */
 -o-transform: rotateX(100deg); /* Opera */
 -moz-transform: rotateX(100deg); /* Firefox */
}
.caja_rotate_y {
 transform: rotateY(10deg);
 -ms-transform: rotateY(10deg); /* IE 9 */
 -webkit-transform: rotateY(10deg); /* Safari y Chrome */
 -o-transform: rotateY(10deg); /* Opera */
 -moz-transform: rotateY(10deg); /* Firefox */
}
.caja_rotate_z {
 transform: rotateZ(40deg);
 -ms-transform: rotateZ(40deg); /* IE 9 */
 -webkit-transform: rotateZ(40deg); /* Safari y Chrome */
 -o-transform: rotateZ(40deg); /* Opera */
 -moz-transform: rotateZ(40deg); /* Firefox */
}

HTML:

<p>trasladar 3d:</p>
    <div class="caja caja_translate3d"></div>
<p>escalar 3d:</p>
    <div class="caja caja_scale3d"></div>
<p>rotar x:</p>
    <div class="caja caja_rotate_y"></div>
<p>rotar y:</p>
    <div class="caja caja_rotate_z"></div>
<p>rotar z:</p>
    <div class="caja caja_rotate_x"></div>

Ver ejemplo en funcionamiento » »
Para ver mejor el efecto de las transformaciones vamos a realizar unas simples animaciones.
CSS:

.caja{
 display:block;
    margin-bottom:20px;
    width:100px;
    height:60px;
 background:#ddd;
    border:2px solid #c8c8c8;
     -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.caja_translate3d:hover {
 transform: translate3d(75%, -25%, 0);
 -ms-transform: translate3d(75%, -25%, 0); /* IE 9 */
 -webkit-transform: translate3d(75%, -25%, 0); /* Safari y Chrome */
 -o-transform: translate3d(75%, -25%, 0); /* Opera */
 -moz-transform: translate3d(75%, -25%, 0); /* Firefox */
}
.caja_scale3d:hover {
 transform: scale3d(0.5, 1.25,1);
 -ms-transform: scale3d(0.5, 1.25,1); /* IE 9 */
 -webkit-transform: scale3d(0.5, 1.25,1); /* Safari y Chrome */
 -o-transform: scale3d(0.5, 1.25,1); /* Opera */
 -moz-transform: scale3d(0.5, 1.25,1); /* Firefox */
}
.caja_rotate_x:hover{
 transform: rotateX(100deg);
 -ms-transform: rotateX(100deg); /* IE 9 */
 -webkit-transform: rotateX(100deg); /* Safari y Chrome */
 -o-transform: rotateX(100deg); /* Opera */
 -moz-transform: rotateX(100deg); /* Firefox */
}
.caja_rotate_y:hover{
 transform: rotateY(10deg);
 -ms-transform: rotateY(10deg); /* IE 9 */
 -webkit-transform: rotateY(10deg); /* Safari y Chrome */
 -o-transform: rotateY(10deg); /* Opera */
 -moz-transform: rotateY(10deg); /* Firefox */
}
.caja_rotate_z:hover{
 transform: rotateZ(40deg);
 -ms-transform: rotateZ(40deg); /* IE 9 */
 -webkit-transform: rotateZ(40deg); /* Safari y Chrome */
 -o-transform: rotateZ(40deg); /* Opera */
 -moz-transform: rotateZ(40deg); /* Firefox */
}

HTML:

<p>trasladar 3d:</p>
    <div class="caja caja_translate3d"></div>
<p>escalar 3d:</p>
    <div class="caja caja_scale3d"></div>
<p>rotar x:</p>
    <div class="caja caja_rotate_y"></div>
<p>rotar y:</p>
    <div class="caja caja_rotate_z"></div>
<p>rotar z:</p>
    <div class="caja caja_rotate_x"></div>

Ver ejemplo en funcionamiento » »