Una mirada a las transformaciones de CSS3 2D
los Modulo de transformacion es una adición tremenda en CSS3, lleva la forma en que manipulamos los elementos de un sitio web al siguiente nivel.
Hay algunos experimentos que realmente me sorprenden, ejemplos como este. Sin embargo, no vamos a construir algo así como un ícono solo para CSS que de alguna manera puede transformarse en un Autobot, ya que puede ser abrumador y no muy utilizable en la vida real también..
En cambio, esta vez, daremos un paso atrás y revisaremos los conceptos básicos de Transformaciones 2D de CSS3 para ver cómo funciona en un nivel fundamental.
La sintaxis
El módulo de Transformaciones CSS3 básicamente nos permite transformar un elemento en cierta medida, como traducir, escalar, rotar y sesgar..
La sintaxis oficial es transformar: método (valor). Sin embargo, como cualquier otra gran adición de CSS3 que aún se encuentre en las primeras etapas, los navegadores actuales todavía necesitan la versión de sintaxis para ejecutar las transformaciones. Entonces, la sintaxis completa resultaría así:
transformar: método (valor); / * Sintaxis oficial de W3C * / -o-transform: method (value); / * Opera 10.5+ * / -ms-transform: method (value); / * Internet Explorer 9.0+ * / -moz-transform: method (value); / * Firefox 3.6+ * / -webkit-transform: method (value); / * Chrome / Safari 3.2+ * /
Además, el método al que nos referimos anteriormente es el funciones de transformación, que podría ser reemplazado por uno de los siguientes: traducir(), escala(), girar() o sesgar().
El valor
La mayor parte del valor del método corresponderá a la Eje x y Eje Y. Si recuerdas el sistema de coordenadas cartesianas de tu clase de matemáticas en la escuela secundaria, el principio básico es bastante similar, el eje X representa el horizontal línea y el eje Y representa el vertical línea.
A excepción de las rotaciones. los rotación utilizará el coordenadas polares que se expresa en grados que van de 0 a 360.
Los valores para todos los métodos pueden ser tanto negativos como positivos. Sin embargo, tome una nota, ya que la página web se lee secuencialmente de arriba a abajo, lo que hace que el eje Y en la web funcione de manera opuesta al principio original de las coordenadas cartesianas. Esto significa que cuando se agrega un valor negativo a Eje Y, se moverá a la parte superior en su lugar.
Usando las transformaciones
Ahora, veamos la siguiente demostración básica para ver Transformación en acción..
Yo traduzco
No se enturbie con el término traducir, No traducirá idioma extranjero. los traducir Aquí hay un método para mover elementos en alguna dirección..
El método contiene dos valores; X y Y. la Valor X como señalamos anteriormente tomaremos el elemento horizontalmente; a la izquierda oa la derecha, mientras que la Y El valor lo lleva verticalmente a la parte inferior o hacia arriba.
Ahora, veamos algunas demostraciones simples a continuación:
div ancho: 100px; altura: 100px; transformar: traducir (100px, 250px);
El fragmento anterior moverá el elemento para 100 px a la derecha y 250 px a la parte inferior.
div ancho: 100px; altura: 100px; transformar: traducir (100px, 0);
El fragmento anterior moverá el elemento justo a la derecha en 100px, porque estamos reduciendo a cero el eje Y. Luego, si queremos mover el elemento a la izquierda, solo necesitamos establecer el eje X en negativo, de la siguiente manera:
div ancho: 100px; altura: 100px; transformar: traducir (-100px, 0);
- Demo "Translate"
Alternativamente, podemos mover el elemento en una sola dirección con estos métodos individuales; traducirX () y traducirY (), La diferencia es que cada uno de esos métodos acepta un solo valor..
Así que, prácticamente hablando, el transformar: traducir (-100px, 0) también es igual a transformar: translateX (-100px).
II - Escala
los escala método nos permite agrandar o reducir Los elementos de su tamaño real. El valor de la escala es el mismo que el de la escala. traducir método anterior, también contiene X e Y. La única diferencia es que no especificamos la unidad. Aquí hay un ejemplo:
div ancho: 100px; altura: 100px; transformar: escala (1.5);
El ejemplo anterior ampliará el div 1.5 o 150% de su tamaño real, y dado que la escalamos de manera igual para las direcciones X e Y, solo necesitamos declararla en un solo valor. También puedes declararlo de esta manera. transformar: escala (1.5,1.5); Si quieres ver más detalles, simplemente hará lo mismo..
Además, si queremos reducir el elemento, utilizaríamos específicamente un valor de 0.999 a 0 absoluto, como en el ejemplo a continuación, lo que reducirá el tamaño de la div en 50% o la mitad:
div ancho: 100px; altura: 100px; transformar: escala (0.5);
Pero, tenga cuidado, si establece el valor como absoluto “0” la div simplemente desaparecerá, así que a menos que tenga una razón válida para hacerlo, no recomendaría hacerlo.
- Demo "Scale"
III - Rotar
Como mencionamos anteriormente en este post, el girar El método utiliza coordenadas polares, por lo que el valor se expresa en grados. Aquí hay dos ejemplos.
El siguiente fragmento girará la div 30 grados en el sentido de las agujas del reloj.
div ancho: 100px; altura: 100px; transformar: rotar (30deg);
Un valor negativo, como se ilustra en el siguiente ejemplo, girará la div en la dirección opuesta (en sentido contrario a las agujas del reloj) en el mismo grado.
div ancho: 100px; altura: 100px; transformar: rotar (-30deg);
- Demo de "Rotate"
IV - Sesgar
los sesgar El método nos permite crear una especie de paralelogramo. También contiene dos valores de los ejes X e Y. Sin embargo, el valor en sí se expresa en grados, en lugar de mediciones lineales como las que usamos para el escala o la traducir método. Aquí hay un ejemplo:
div ancho: 200px; altura: 100px; transformar: sesgo (30deg, 10deg);
- Demo "Skew"
V - Método múltiple
los transformar La propiedad no se limita a manejar solo un método, de hecho, podemos incluir múltiples métodos en declaraciones individuales, como esto:
div ancho: 100px; altura: 100px; transform: translateX (100px) rotate (45deg);
El fragmento anterior moverá el elemento 100px a la derecha y al mismo tiempo también gira 45 grados.
Demo "Multiple Method".
Transformar origen
los origen de transferencia - como su nombre lo indica, se utiliza para controlar el punto de inicio de la transformación. Si no declaramos explícitamente esta propiedad con la siguiente sintaxis origen de transformación: X Y;, entonces el navegador tomará el valor predeterminado que es 50% para la X y 50% para la Y.
Ahora, si especificamos el origen transformado a 0 (X) 0 (Y) la transformación comenzará en la parte superior izquierda.
De nuevo, todos los navegadores todavía necesitan la versión de prefijo para llamar a esta propiedad. Entonces, aquí está la versión completa para garantizar que funcione en la mayoría de los navegadores actuales:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; origen de transformación: X Y;
- Demo de "origen transformado"
Conclusión
Hemos llegado a través de los cuatro métodos de transformación esenciales; traducir, escalar, rotar y sesgar
Sin embargo, como se mencionó, este módulo aún se encuentra en una etapa temprana, por lo que si aplica estos métodos en su próximo sitio web, asegúrese de que se degrada correctamente para los navegadores incompatibles (no me refiero a IE6 aquí).
Por último, puede ver toda la demostración o descargar la fuente de los siguientes enlaces.
- Manifestación
- Descargar fuente
