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 » »
