En el mundo del diseño web, hablar de transformaciones 2D CSS3 es sinónimo de creatividad y originalidad. Y es que, gracias a esta herramienta, podemos llevar a cabo una amplia variedad de cambios en la apariencia visual de nuestros sitios web. En este artículo vamos a profundizar en las transformaciones 2D CSS3 y cómo podemos utilizarlas para crear efectos impresionantes como el TIEngranaje. ¿Te animas a descubrirlo? ¡Sigue leyendo!
Transformaciones CSS3 permitir a los desarrolladores web tomar casi cualquier elemento en un documento HTML y rotarlo, traducirlo, sesgarlo y escalarlo, todo sin cambiar su efecto en el diseño de página. CSS3 proporciona transformaciones 2D y 3D.
Sin embargo, aunque las transformaciones 2D son compatibles con todos los navegadores modernos, Transformaciones 3D están actualmente solo compatible en Safari, Chrome e Internet Explorer versión 10. En este artículo, veremos más de cerca cómo usar transformaciones 2D.
¿Cómo funcionan las transformaciones?
En un nivel alto, una transformación es un efecto que permite que un elemento cambie su forma, tamañoy posición. Echaremos un vistazo a algunos ejemplos para tener una mejor idea de cómo funcionan estas transformaciones.
Transformar propiedad
El transform la propiedad acepta por su valor, uno o mas funciones de transformación. Estas funciones de transformación especifican una transformación. Las funciones toman la forma de un nombre de función, con un valor dentro de un conjunto de paréntesis.
Compatibilidad con navegador
En el momento de escribir este artículo, el transform la propiedad es No soportado por cualquier navegador. Sin embargo, actualmente se admiten los prefijos de proveedores.
| Navegador | Prefijo de proveedor |
|---|---|
| Explorador de Internet 9+ | -ms-transform |
| Firefox | -moz-transform |
| Ópera | -o-transform |
| Safari | -webkit-transform |
| Cromo | -webkit-transform |
Sintaxis
El transform propiedad toma funciones de transformación como su valor. El valor predeterminado es none.
transform: none|transform-functions| Función de transformación | Descripción |
|---|---|
matrix(n,n,n,n,n,n) |
Transformación 2D, utilizando una matriz de seis valores. |
rotate(angle) |
Rotación 2D, el ángulo se especifica en el parámetro. |
scale(x,y) |
Transformación de escala 2D, cambiando el ancho y alto del elemento. |
scaleX(n) |
Transformación de escala 2D, cambiando el ancho del elemento. |
scaleY(n) |
Transformación de escala 2D, cambiando la altura del elemento. |
skew(x-angle,y-angle) |
Transformación de sesgo 2D a lo largo de los ejes X e Y. |
skewX(angle) |
Transformación de sesgo 2D a lo largo del eje X. |
skewY(angle) |
Transformación de sesgo 2D a lo largo del eje Y. |
translate(x,y) |
Traslación 2D, moviendo el elemento a lo largo de los ejes X e Y. |
translateX(n) |
Traslación 2D, moviendo el elemento a lo largo del eje X. |
translateY(n) |
Traslación 2D, moviendo el elemento a lo largo del eje Y. |
función traducir()
Con el translate() función, el elemento se mueve de su posición actual a una nueva posicióndependiendo de los parámetros proporcionados para la posición izquierda (eje X) y superior (eje Y).
Si sólo desea traducir a lo largo de la eje xpuedes usar el translateX() función. Si sólo desea traducir a lo largo de la eje Yutilizar el translateY() función.
<!DOCTYPE html>
<html>
<head>
<style>
.group {
width:200px;
height:200px;
position:absolute;
border:1px solid black;
padding:10px;
}
.original {
background-color:#EFEFEF;
}
#target {
background-color:#FFAA00;
-ms-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);
-webkit-transform:translate(100px,100px);
-o-transform:translate(100px,100px);
transform:translate(100px,100px);
}
</style>
</head>
<body>
<div class="original group" id="original">Original</div>
<div class="group" id="target">Transform</div>
</body>
</html>función rotar()
Con el rotate() función, podemos rotar un elemento en sentido horario o antihorario en un grado dado. A valor positivo gira el elemento en el sentido de las agujas del reloj. A valor negativo gira el elemento en sentido contrario a las agujas del reloj.
#target {
background-color:#FFAA00;
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}escala() función
El scale() función aumenta o disminuye la tamaño del elemento de destino dependiendo de los parámetros dados para el ancho (eje X) y la altura (eje Y).
Si solo desea escalar en el eje xutilizar el scaleX() función. Si solo desea escalar el eje Yutilizar el scaleY() función. El valor numérico proporcionado lo escalará ese número de veces.
#target {
background-color:#FFAA00;
-ms-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
-o-transform:scale(1.5,1.5);
transform:scale(1.5,1.5);
}función sesgar()
El skew() función gira un elemento en un ángulo dadodependiendo de los parámetros dados para las líneas horizontales (eje X) y verticales (eje Y).
Si sólo desea sesgar en el eje xutilizar el skewX() función. Si sólo desea sesgar en el eje Yutilizar el skewY() función.
#target {
background-color:#FFAA00;
-ms-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}función matriz()
Si bien es poco probable que alguna vez necesite usar el matrix función, por debajo de todas estas funciones es el núcleo de las transformaciones CSSque se basa en el concepto matemático de una matriz de transformación.
Cada una de las funciones que hemos cubierto hasta ahora se puede representar mediante un valor de la matriz.
Puedes visitar el W3C sitio para obtener información detallada sobre la matriz de transformación. En el siguiente ejemplo, vamos a rotar un elemento div 30 grados, usando el matrix función.
#target {
background-color:#FFAA00;
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}Propiedad de origen de transformación
El transform-origin propiedad le permite cambiar la posición en el elemento transformado. Un elemento con una propiedad transformada 2D puede cambiar la eje x y eje Y del elemento
En otras palabras, el transform-origin La propiedad establece la ubicación base de un elemento. Para transformaciones 3Dpuede cambiar el Eje Z también.
transform-origin: x-axis y-axis z-axis;El eje x y eje Y Los valores se pueden proporcionar como left, center, right, [length]o [percentage]. Aquí hay un ejemplo.
#target {
background-color:#FFAA00;
-ms-transform: rotate(45deg);
-ms-transform-origin:25px 30px;
-webkit-transform: rotate(45deg);
-webkit-transform-origin:25px 30px;
-moz-transform: rotate(45deg);
-moz-transform-origin:25px 30px;
-o-transform: rotate(45deg);
-o-transform-origin:25px 30px;
transform: rotate(45deg);
transform-origin:25px 30px;
}En este ejemplo anterior, puede comparar el elemento que solo ha sido rotado, contra un elemento que ha sido rotado y ha tenido la transform-origin propiedad aplicada.
Como puedes ver, el transform-origin tiene cambió la posición del elemento en su eje X así como en su eje Y.
