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