CSS combina transformación de objetos y. Animación en movimiento suave usando CSS. transform:rotate(x) - rota el objeto

Resultado Esta lección trabaja en Navegadores Safari, Chrome, Opera, Firefox, a partir de la versión 4 (donde verás transformaciones, pero sin animación). Además, utilizando el prefijo del navegador -ms-, puede ver resultado positivo en IE, a partir de la versión 9.

Para la implementación Animaciones CSS se debe establecer configuraciones especiales transformaciones que responderán a los eventos del ratón. También es necesario indicar funcion especial, que será responsable del tiempo de ejecución de la animación.

Para que las transformaciones funcionen en Firefox y Opera, simplemente reemplace el prefijo -webkit con -moz y -o. Para IE - a -ms.

1. Introducción a las transformaciones CSS

Las transformaciones CSS se utilizan para cambiar la apariencia, la rotación y otras transformaciones de un elemento. Todas estas configuraciones están configuradas en hojas de estilo normales y, cuando abres la página, ya ves resultado final transformación. Para ver la transformación de una vista a otra (animación de transformación), puede adjuntar algún tipo de evento al elemento (por ejemplo, el evento de pasar el mouse);

En el siguiente ejemplo, hemos colocado 4 absolutamente divs idénticos con un borde de 2px. Para transformar estos elementos en navegadores que se ejecutan en webkit, agregue el prefijo -webkit-transform:

Sin estas transformaciones, los divs se verán exactamente iguales.

2. Animación

Para animar transformaciones en navegadores Webkit, puede utilizar el prefijo -webkit-transition. La demostración se muestra a continuación:

Hay 4 divs idénticos frente a ti. Para iniciar la animación, debe mover el mouse hacia adentro o hacia afuera. Con todo esto, nada de JavaScript. Sólo HTML y CSS.

La animación CSS se puede aplicar no sólo a las transformaciones, sino también a otras propiedades como la transparencia, el color y más. Esto se demuestra en el siguiente ejemplo. Un elemento se convierte en otro y viceversa:

Nuevamente, solo usamos HTML y CSS. EN en este caso, cambie la configuración color del borde, radio del borde.

4. Múltiples transformaciones en un elemento.

Para aplicar múltiples transformaciones al mismo elemento, simplemente enumere las configuraciones separadas por un espacio. P.ej:

Estas configuraciones, al pasar el mouse sobre 1 segundo, cambiarán el color del submenú, lo rotarán y aumentarán su tamaño.

4. Animación en acción

Aqui hay otro más ejemplo interesante combinando varios tipos de transformaciones en una animación:

Es posible que este ejemplo no funcione muy bien en Safari 3 y versiones anterioresÓpera.

El cuadro rodeado por un marco de puntos que aparece mientras se reproduce la animación representa la posición elemento div. Simplemente lo cambiamos y rotamos su contenido. ¡Es sencillo!

Para crear animaciones más complejas, es necesario utilizar fotogramas clave especiales.

5. Usar diferentes tipos de animación

En este ejemplo, agregaremos varias transformaciones de elementos, cada una de las cuales se reproducirá dentro de un período de tiempo específico.

Cuando ocurre un evento:hover, el cuadrado azul girará, cambiará de color a rojo y se moverá desde la esquina superior izquierda a la inferior derecha.

Lo primero que probablemente deberías haber notado es la peculiaridad del movimiento del cuadrado. Ahora no es agudo, sino más "curvo". Todo gracias a las funciones de entrada y salida fáciles.

Tenga en cuenta también que el cambio de color se produce antes de la rotación.

El truco es que puedes dividir -webkit-transition en varias entradas:

#block (... fondo: azul; ... -webkit-transition-property: izquierda, arriba, fondo, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition -función de temporización: salida fácil, entrada fácil, lineal, entrada-salida fácil; -webkit-transition-delay: 0, 0, 0, 1s...) #stage:hover #block (izquierda: 100px; arriba: 100px; fondo: rojo; -webkit-transform: rotar (360 grados);

6. El acontecimiento de un elemento transforma otro

Probablemente muchas personas estarán interesadas en una funcionalidad similar: al hacer clic en un elemento se transforma otro. En CSS, esto se puede lograr usando los selectores >, + y ~.

He aquí un ejemplo relevante:

En este ejemplo, utilizamos el signo + para interactuar con #box1 y #box2. ~ se puede utilizar para acceder a elementos que se encuentran en algún lugar alejado del elemento que está esperando el evento.

#box2 ( posición: absoluta; izquierda: 120px; ... fondo: azul; ... ) #box1:hover + #box2 ( -webkit-transform: rotar(360deg); -moz-transform: rotar(360deg); -o-transform: rotar(360deg); -ms-transform: rotar(360deg); transformar: rotar(360deg);

Al mismo tiempo podemos animar el primer bloque:

El único inconveniente de estos ejemplos es que no funcionan (o funcionan mal) en versiones anteriores de navegadores.

¡Gracias a Niall por el tutorial sugerido!

• Traducción

¡Hola querido habrafriend! Hay muchos ejemplos en línea de excelentes usos de transformaciones y transiciones en CSS3. En este artículo, repasaremos los conceptos básicos de CSS3 y aprenderemos cómo crear algo como esto. Este tutorial será útil para aquellos que recién comienzan a familiarizarse con CSS3. ¡Empecemos!

Sistema coordinado

Para que sea más fácil entender cómo funciona el movimiento de un objeto, trabajaremos en un sistema de coordenadas.


Sin embargo, nuestro sistema de coordenadas tiene una peculiaridad: el eje Y está dirigido en la dirección opuesta a la habitual. ¿Por qué? El hecho es que HTML y CSS (junto con, por ejemplo, ActionScript) utilizan un sistema de coordenadas inverso, ya que la página web comienza desde la izquierda. esquina superior y baja.
La nota: Asumiremos que ya está familiarizado con estructura HTML y CSS. Me saltaré las explicaciones sobre cómo configurar. archivo css, cómo colocar fotografías, etc. Nos centraremos en animar imágenes. Si no estás seguro de cuáles son tus habilidades nivel alto, entonces te recomendamos echar un vistazo al curso de lecciones “HTML y CSS en 30 días” (gratis y en idioma en Inglés) para aprender todo lo que necesitas.

1: movimiento horizontal

El primer movimiento que demostraremos es horizontal. Moveremos objetos de izquierda a derecha y de derecha a izquierda.

Moviéndose a la derecha

Para mover un objeto usaremos transformar: traducir (x, y), donde X es un número positivo e Y=0.


HTML
Abra su editor de código favorito e ingrese lo siguiente:

Definimos tres clases para la imagen:

• objeto: Establecer las reglas básicas de nuestro objeto.
• van: Usaremos diferentes objetos para demostrar cada tipo de animación.
• move-right: Usando esta clase moveremos nuestro objeto.

CSS
Primero, colocaremos nuestro objeto (la imagen del camión) en el centro.
.object ( posición: absoluta; ) .van ( arriba: 45%; izquierda: 44%; )
En este ejemplo, moveremos el objeto 350 px hacia la derecha. Sintaxis utilizada transformar: traducir (350px, 0);. Además, el objeto sólo se moverá cuando pases el cursor sobre él: #axis:hover .move-derecha.

#axis:hover .move-right( transform: traducir(350px,0); -webkit-transform: traducir(350px,0); /** Chrome y Safari **/ -o-transform: traducir(350px,0) ; /** Opera **/ -moz-transform: traducir(350px,0);
Parámetro transformar simplemente moverá el objeto de un punto a otro, pero no creará una animación movimiento dado. Para solucionar este problema, debe agregar un parámetro de movimiento a class.object.

Objeto (posición: absoluta; transición: todos los 2 entran y salen fácilmente; -webkit-transition: todos los 2 entran y salen fácilmente; /** Chrome y Safari **/ -moz-transition: todos los 2 entran y salen fácilmente ; /** Firefox **/ -o-transition: todos los 2 entran y salen fácilmente /** Opera **/ )
Esta regla de movimiento le indicará al navegador que anime Todo parámetros del objeto en 2 segundos(sin demora) usando la función facilidad para entrar y salir.
Podemos utilizar 6 funciones diferentes de sincronización de movimiento:

• lineal: se produce movimiento velocidad constante de principio a fin.
• facilidad: El movimiento comienza lentamente y luego aumenta la velocidad.
• facilidad en: El movimiento comienza lentamente.
• Facilitarse: El movimiento termina lentamente.
• facilidad de entrada y salida: El movimiento comienza y termina lentamente.
• Bézier cúbico: determine manualmente el valor del movimiento.

Moviéndose hacia la izquierda

Para mover un objeto hacia la izquierda, solo necesitas poner un valor negativo en el eje. OH, mientras Y permanece sin cambios. En nuestro caso, moveremos el objeto a - 350px A la izquierda.

HTML
Crea uno nuevo documento html y pega el siguiente código:

Esta vez estamos usando la clase. mover hacia la izquierda para mover el objeto hacia la izquierda.

CSS
Ahora ingresemos -350px para el eje OX. transformar: traducir (-350px, 0);- mueve el objeto hacia la izquierda.
#axis:hover .move-left ( transformar: traducir(-350px,0); -webkit-transform: traducir(-350px,0); /** Safari y Chrome **/ -o-transform: traducir(-350px ,0); /** Opera **/ -moz-transform: traducir(-350px,0);
Como ya definimos las reglas de movimiento anteriormente, no es necesario volver a hacerlo.

2: movimiento vertical

Mover un objeto verticalmente no será difícil, porque es idéntico al horizontal. La única diferencia es que usaremos el valor -y para ascender y valorar y para bajar.

Subiendo

HTML
La plantilla HTML es idéntica a los ejemplos anteriores. Sin embargo, reemplazaremos nuestro objeto con un cohete (para mayor claridad) y le asignaremos una clase de ascenso.

CSS
Al igual que el camión, colocaremos el cohete en el centro:
.cohete (arriba: 43%; izquierda: 44%;)
Como señalamos anteriormente, la coordenada Y debe ser negativa. En nuestro caso, moveremos el objeto 350px hacia arriba.

#axis:hover .move-up ( transformar: traducir(0,-350px); -webkit-transform: traducir(0,-350px); -o-transform: traducir(0,-350px); -moz-transform: traducir(0,-350px)

bajemos

Como habrás adivinado, para mover un objeto hacia abajo, la coordenada Y debe ser positiva y la coordenada X debe ser 0. Sintaxis: traducir(0,y);

HTML

CSS
#axis:hover .move-down ( transformar: traducir(0,350px); -webkit-transform: traducir(0,350px); -o-transform: traducir(0,350px); -moz-transform: traducir(0,350px); )

3: movimiento diagonal

Para mover un objeto en diagonal, combinaremos los parámetros. X Y y. La sintaxis será la siguiente: transformar: traducir (x, y). Dependiendo de la dirección, el valor X Y y puede ser positivo o negativo.

HTML

CSS
#axis:hover .move-ne ( transformar: traducir(350px,-350px); -webkit-transform: traducir(350px,-350px); -o-transform: traducir(350px,-350px); -moz-transform: traducir(350px,-350px)

4: Rotación

La rotación en CSS3 está controlada por coordenadas de grados (de 0° a 360°). Para rotar un objeto, aplique las siguientes opciones: transformar: rotar (ndeg); Dónde norte- grados.

Rotación en el sentido de las agujas del reloj

Para rotar un objeto en el sentido de las agujas del reloj, aplique un valor positivo a rotar(ndeg).

HTML

CSS
#axis:hover .rotate360cw ( transformar: rotar(360deg); -webkit-transform: rotar(360deg); -o-transform: rotar(360deg); -moz-transform: rotar(360deg); )

Rotación en el sentido contrario a las manecillas del reloj

Para rotar un objeto en sentido antihorario, aplique un valor negativo para rotar(ndeg).

HTML

CSS
#axis:hover .rotate360ccw ( transformar: rotar(-360deg); -webkit-transform: rotar(-360deg); -o-transform: rotar(-360deg); -moz-transform: rotar(-360deg); )

5: escala

El escalado es característica interesante CSS3. Usando el parámetro escala(n) o parámetro escala(x,y), podemos aumentar o disminuir el objeto directamente en marco HTML. El objeto cambiará de tamaño dependiendo del valor de n/x,y, donde el eje X es el ancho y el eje Y es la altura.
Veamos el siguiente ejemplo.

Vimos anteriormente que CSS nos permite aplicar colores, establecer fuentes, cambiar la configuración del texto, posicionar elementos, darles espacio, decorarlos y moverlos.

Transformaciones en CSS representan un conjunto funciones, que te permiten dar de cierta manera forma de elemento:

• traducir: mueve el elemento a lo largo de tres ejes (x, y, z);
• rotar: rota el elemento alrededor de su punto central;
• escala: cambia el tamaño del elemento;
• sesgar: distorsiona el elemento.

Propiedades de transformación

Hay tres propiedades disponibles para la transformación:

• transformar determina cuál función se aplicará (traducir, rotar, escalar, etc.);
• transform-origin te permite cambiar el punto de origen de la transformación (funciona como background-position);
• Estilo de transformación para entornos 3D.

Tenga en cuenta que, a diferencia del fondo y el borde, la propiedad de transformación no está abreviado.

Aquí solo usaremos transform.

No interrumpe el flujo

Para evitar comportamientos inesperados, elementos transformables. no afecta el flujo. Independientemente de la rotación, escala o movimiento, no afectarán a otros elementos.

traducir

La función traducir() le permite mover un elemento en un plano (a lo largo de los ejes xey). Acepta:

• uno parámetro: mueve el elemento a lo largo del eje x;
• dos parámetro: el primer valor es para el eje x, el segundo es para el eje y.

Esto es similar a usar el posicionamiento relativo usando valores izquierdo y superior.

Rehagamos nuestra animación en bucle con usando traducir, en lugar de posicionarse hacia la izquierda/arriba:

@keyframes traduciendo ( 0% ( transformar: traducir(0, 0); ) 25% ( transformar: traducir(240px, 0); ) 50% ( transformar: traducir(240px, 140px); ) 75% ( transformar: traducir( 0, 140px); ) 100% ( transformar: traducir (0, 0); ) ) p (animación: traducir 4s lineal infinito;)

Recuerda: transformar es una cuestión de estilo propiedad, traducir() es significado(y al mismo tiempo una función), aplicado a esta propiedad.

Puede utilizar TranslateX() y TranslateY() para mover un elemento solo a lo largo de los ejes x e y, respectivamente.

girar

La función rotar() permite rotar un elemento alrededor de un punto fijo. De forma predeterminada, la rotación se produce alrededor del centro del elemento. Piense en ello como un disco que se reproduce en un tocadiscos.

rotar() solo acepta uno parámetro cual es el valor ángulo y se define en grados (deg), grads (grad), radianes (rad) o revoluciones (turn) (una revolución equivale a un círculo completo).

@keyframes rotando ( 0% ( transformar: rotar(0deg); ) 100% ( transformar: rotar(360deg); ) ) p (animación: rotar 4s lineal infinito; )

escala

La función scale() le permite cambiar el tamaño de un elemento. Puede ampliar o reducir un elemento. La función acepta:

• uno parámetro: cambiar el tamaño del elemento por igual en alto y ancho;
• dos parámetro: el primer valor cambia el tamaño del elemento horizontalmente, el segundo, verticalmente.

Rango de valores posibles:

• 1: el elemento conserva su tamaño original;
• 2: el elemento duplica su tamaño;
• 0,5: el elemento se reduce a la mitad;
• 0: El elemento básicamente desaparece (ya que su alto y ancho son cero);
• -1: El elemento se refleja.

@keyframes escala ( 0% ( transformar: escala(1); ) 20% ( transformar: escala(2); ) 40% ( transformar: escala(0.5); ) 60% ( transformar: escala(0); ) 80% ( transformar: escala(-1); ) 100% ( transformar: escala(1); ) ) p (animación: escalar pasos de 10(1) 0s infinito; )

Al igual que Translate() , la función scale() tiene versiones x e y: scaleX() y scaleY() , para cambiar el tamaño horizontal y verticalmente, respectivamente.

sesgar

La función skew() permite distorsionar elemento, moviendo sus lados a lo largo de las líneas.

Esta función de conversión rara vez se utiliza porque sus consecuencias son bastante impredecibles y el resultado no es necesariamente atractivo. Sin embargo, veamos cómo funciona.

Al igual que scale() , la función skew() acepta:

• uno parámetro: el elemento está distorsionado horizontalmente;
• dos parámetro: el primer valor distorsiona el elemento horizontalmente, el segundo, verticalmente.

Al igual que turn(), skew() solo acepta valores de ángulo, como grados (grados).

@keyframes sesgado ( 0% ( transformar: sesgar(0deg); ) 20% ( transformar: sesgar(10deg); ) 40% ( transformar: sesgar(45deg); ) 60% ( transformar: sesgar(90deg); ) 80% ( transformar: sesgar(120deg); ) 100% ( transformar: sesgar(0deg); ) ) p ( animación: sesgar 10s pasos(1) 0s infinito; )

características 3D

Hemos visto cómo funcionan las funciones de transformación en avión, a lo largo de los ejes x e y.

Por ejemplo:

• traducir() tiene hasta dos parámetros:
  • traducir(x)
  • traducir(x,y)
• traducirX() solo para el eje x
• traducirY() sólo para el eje y

Pero para todas estas funciones también existe Versiones 3D.

Por ejemplo, traducir() tiene una versión traducir3d() que realiza la conversión a tres dimensiones, lo que significa que también incluye eje Z(además hay función separada traducirZ).

Propiedad transformación CSS(de la palabra "transformación") le permite modificar un elemento en las páginas HTML. Por ejemplo, puedes

• girar
• desplazar
• cambiar escala
• no poder
• combinar los pasos anteriores

Gracias a esta propiedad, puedes crear efectos interesantes sin Aplicaciones JavaScript, que le permite acelerar el navegador. También es importante señalar que es posible combinar el efecto con retrasos temporales.

1. Sintaxis de transformación CSS

transformar: transformar1 [transformar2];

Se permiten varias acciones con un objeto simultáneamente (por ejemplo, rotar, desplazar y cambiar la escala).

Una nota sobre los navegadores

No todos los navegadores admiten la transformación. Debe utilizar prefijos CSS del proveedor:

• -ms-transform: para IE9 y versiones anteriores (inferiores a la versión 9, no se admite la transformación)
• -webkit-transform - para Chrome, Safari, Android e iOS
• -o-transform - para Opera hasta la versión 12.10
• -moz-transform - para Firefox hasta la versión 16.0

2. transformar:rotar(x) - rotación de objetos

Para rotar un elemento hay un comando rotar(x). Le permite rotar un objeto x grados en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj. El valor de x debe especificarse en grados

Ejemplo 1. Rotar un objeto en html mediante transformación.

Nota

Propiedades:

-ms-transform: rotar (20 grados); -webkit-transform: rotar (20 grados); -o-transformar: rotar (20 grados); -moz-transform: rotar (20 grados);

Necesitado para funcionamiento correcto en versiones anteriores de navegadores. En los siguientes ejemplos también los escribiremos.

Ejemplo #2. Girar un objeto en html al pasar el mouse

Creemos una clase kvadrat2 y escribamos una pseudoclase :hover para ella, en la que se especificará la rotación y el cambio de color a uno más claro (de #444 a #888).

La página se convierte a la siguiente

Pero esta rotación se produce de forma abrupta y no parece "espectacular". Esto se puede solucionar fácilmente alisando. El siguiente ejemplo implementará la animación.

Ejemplo #3. Rotación suave al pasar el mouse (animación) en html

Para una rotación suave (o en otras palabras, suavizado), necesita establecer una propiedad de transición más. Esta propiedad es responsable del efecto de sincronización y suavizado. EN en este ejemplo el caso más simple con una transición en 1 segundo se considera con velocidad lineal lineal

La página se convierte a la siguiente

Se ha vuelto mucho más bonito y esta animación brinda muchas oportunidades para crear efectos en el sitio usando solo CSS.

3. transformar: traducir (x, y) - desplazamiento de objeto

El siguiente comando que veremos es el comando para mover un objeto traducir(x,y) , donde los argumentos entre paréntesis son el desplazamiento a lo largo de los ejes X e Y, respectivamente.

Ejemplo #4. Desplazamiento de objetos en html mediante transformación.

La página se convierte a la siguiente

Estos efectos se utilizan a menudo. Después de todo, esto hace posible crear animaciones sin JavaScript. En este caso, el cuadrado se mueve instantáneamente (sin animación).

Nota

Si necesita aplicar una transformación a lo largo de solo uno de los ejes, puede usar un caso más especial: traducirX(x) - desplazamiento X, traducirY(y) - desplazamiento Y.

4. transform:scale(x,y) - escalado de objetos

El comando para escalar un objeto es escala(x,y) , donde los argumentos entre paréntesis son la escala a lo largo de los ejes X e Y, respectivamente.

Ejemplo #5. Escalar objetos en html

La página se convierte a la siguiente

Al pasar el cursor, el cuadrado se hace más grande horizontalmente en un 50% (coeficiente 1,5) y verticalmente en un 30% (coeficiente 1,3). Un valor de 1 significa que no hay escala. Cualquier valor menor que 1 significará que el objeto se está haciendo más pequeño.

Nota

Si necesita aplicar una transformación solo a lo largo de uno de los ejes, puede usar un caso más especial: escalaX(x): escalar a lo largo de X, escalaY(y) - escalar a lo largo de Y.

5. transformar: sesgar - inclinación del objeto

El comando para inclinar un objeto es skew(x,y) , donde los argumentos entre paréntesis son la pendiente a lo largo de los ejes X e Y, respectivamente. La pendiente debe especificarse en grados.

Ejemplo #6. Inclinar objetos en html

La página se convierte a la siguiente

Cuando se coloca sobre él, el cuadrado se transforma en un diamante gracias a la inclinación.

Nota

Si necesita aplicar una transformación a lo largo de solo uno de los ejes, puede usar un caso más especial: skewX(x) - pendiente en X, skewY(y) - pendiente en Y.

6. Combinando valores de transformación

Es hora de observar los efectos interesantes que se pueden lograr combinando diferentes transformaciones. Apliquemos tres acciones a la vez para cambiar el objeto: escalar (escalar), rotar (rotar) y trasladar (traducir).

Ejemplo #7. Combinando valores de transformación

Valor inicial: cuadrado con borde negro. Cuando pases el cursor sobre él, girará formando un círculo con un marco rojo y cambiará de color.

La página se convierte a la siguiente

7. Otros valores de transformación

Hemos analizado los valores de transformación más básicos. Consideremos otras posibilidades.

• ninguno: sin transformación (está habilitado de forma predeterminada);
• matriz(x,x,x,x,x,x) - Transformación 2D usando una matriz de 6 valores;
• matriz3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x)- Transformación 3D utilizando una matriz de 16 valores;
• traducir3d(x,y,z) - movimiento 3d (en comparación con el movimiento normal, aquí se agrega una tercera coordenada);
• scale3d(x,y,z) - escala en 3d (en comparación con la escala normal, aquí se agrega una tercera coordenada);
• rotar3d(x,y,z) - rotación en 3d (en comparación con la rotación normal, aquí se agrega una tercera coordenada);
• rotarX(x) - rotación 3d a lo largo del eje X;
• rotarY(x) - rotación 3d a lo largo del eje Y;
• rotarZ(x) - rotación 3d a lo largo del eje Z;
• perspectiva(n) - perspectiva para transformar el elemento 3D;

En JavaScript propiedad CSS La transformación está disponible en las siguientes propiedades:

object.style.transform="Transformación" document.getElementById("elementID").style.transform = ""

Es posible que se pregunte "¿por qué utilizar la transformación cuando simplemente puede cambiar los datos del objeto según lo necesitemos, por ejemplo, cambiando el tamaño del objeto?" La diferencia es que la propiedad de transformación no desplaza otros elementos de la página durante la transformación. En caso cambio sencillo el tamaño del objeto, esto conduce inevitablemente a un desplazamiento de los objetos vecinos, lo que, por regla general, es feo.

Modelo formato visual CSS describe un sistema de coordenadas dentro de cada elemento posicionado. El sistema de coordenadas es el punto de referencia para las propiedades de desplazamiento. Se puede considerar que la posición y las dimensiones en este espacio de coordenadas están dadas en píxeles, en relación con un punto de referencia, con valores positivos hacia la derecha y hacia abajo. Este espacio de coordenadas se puede cambiar usando la propiedad de transformación.

Transformaciones CSS3 Le permite mover, rotar y escalar elementos. Las transformaciones transforman un elemento sin afectar a otros elementos de la página web, es decir, otros elementos no se mueven con respecto a él.

Los elementos que se pueden transformar incluyen elementos con display: block; y mostrar: bloque en línea; , así como elementos, significado propiedades de visualización que se evalúa como fila de tabla, grupo de filas de tabla, grupo de encabezado de tabla, grupo de pie de página de tabla, celda de tabla o título de tabla. Un elemento con cualquier valor ajustado transformar propiedades distintas de none .

Hay dos tipos de transformaciones CSS3: 2D Y 3D. transformaciones 2D transformar elementos en un espacio bidimensional utilizando una matriz de transformación 2D. Esta matriz se utiliza para calcular nuevas coordenadas de objetos en función de los valores de las propiedades de transformación y origen de transformación. Las transformaciones solo afectan la representación visual. En términos de diseño de página, pueden provocar que el contenido del bloque se desborde. Por defecto, el punto de transformación está en el centro del elemento.

Transformaciones 2D de elementos.

Soporte del navegador

ES DECIR: 10,0, 9,0 -ms-
Borde: 12.0
Firefox: 16.0, 3.5 -moz-
Cromo: 36.0, 4.0 -kit web-
Safari: 9.0, 3.1 -kit web-
Ópera: 23.0, 15.0 -kit web-
iOSSafari: 9, 7.1 -kit web-
Navegador de Android: 53, 2.1 -kit web-
Cromo para Android: -webkit-

1. Transformación de funciones de transformación 2D

La propiedad especifica el tipo de transformación del elemento. La propiedad se describe usando funciones de transformación, que desplazan el elemento con respecto a él situación actual en la página o cambiar su tamaño y forma originales. No heredado.

Valores válidos:

matriz() - cualquier número
traducir() , traducirX() , traducirY() — unidades de longitud (positivas y negativas), %
escala() , escalaX() , escalaY() - cualquier número
rotar() - ángulo (grados, grados, rad o giro)
skew() , skewX() , skewY() - ángulo (grados, grados, rad)

Función	Descripción
ninguno	El valor predeterminado significa que no hay transformación. También deshace la transformación de un elemento de un grupo de elementos transformables.
matriz (a, c, b, d, x, y)	Compensa elementos y establece cómo se transforman, lo que le permite combinar múltiples funciones de transformación 2D en una. Se permiten como transformaciones la rotación, el escalado, la inclinación y el reposicionamiento. El valor de a cambia la escala horizontal. Un valor entre 0 y 1 disminuye el elemento y un valor mayor que 1 lo aumenta. El valor c deforma (desplaza) los lados del elemento a lo largo del eje Y, un valor positivo hacia arriba y un valor negativo hacia abajo. El valor b deforma (desplaza) los lados del elemento a lo largo del eje X, un valor positivo hacia la izquierda, un valor negativo hacia la derecha. El valor d cambia la escala vertical. Un valor menor que 1 disminuye el elemento, mayor que 1 lo aumenta. El valor x mueve el elemento a lo largo del eje X, positivo hacia la derecha y negativo hacia la izquierda. Un valor y mueve el elemento a lo largo del eje y, un valor positivo lo mueve hacia abajo y un valor negativo lo mueve hacia arriba.
traducir(x,y)	Desplaza un elemento a una nueva ubicación, moviéndolo con respecto a su posición normal hacia la derecha y hacia abajo usando las coordenadas X e Y, sin afectar los elementos adyacentes. Si necesita mover un elemento hacia la izquierda o hacia arriba, entonces necesita usar valores negativos.
traducirX(n)	Desplaza un elemento en relación con su posición X normal.
traducirY(n)	Desplaza un elemento con respecto a su posición normal a lo largo del eje Y.
escala(x,y)	Escala elementos para hacerlos más grandes o más pequeños. Los valores entre 0 y 1 hacen que el elemento sea más pequeño. El primer valor escala el elemento en ancho, el segundo en alto. Los valores negativos muestran el elemento en forma de espejo.
escalaX(n)	La función escala el ancho del elemento, haciéndolo más ancho o más estrecho. Si el valor es mayor que uno, el elemento se vuelve más ancho; si el valor está entre uno y cero, el elemento se vuelve más estrecho. Los valores negativos muestran el elemento reflejado horizontalmente.
escalaY(n)	La función escala la altura del elemento, haciéndolo más alto o más bajo. Si el valor es mayor que uno, el elemento se vuelve más alto; si el valor está entre uno y cero, el elemento se vuelve más bajo. Los valores negativos muestran el elemento reflejado verticalmente.
rotar (ángulo)	Gira los elementos un número específico de grados, los valores negativos de -1 grado a -360 grados giran el elemento en el sentido contrario a las agujas del reloj, los valores positivos giran el elemento en el sentido de las agujas del reloj. El valor de rotación (720 grados) gira el elemento dos revoluciones completas.
sesgar (ángulo x, ángulo y)	Se utiliza para deformar (distorsionar) los lados de un elemento en relación con los ejes de coordenadas. Si se especifica un valor, el navegador determinará automáticamente el segundo.
sesgarX(ángulo)	Deforma los lados del elemento con respecto al eje X.
sesgadoY(ángulo)	Deforma los lados del elemento con respecto al eje Y.
inicial	Establece el valor de la propiedad en el valor predeterminado.
heredar	Hereda el valor de la propiedad del elemento padre.

Sintaxis

Div ( -webkit-transform: rotar (360 grados); -ms-transform: rotar (360 grados); transformar: rotar (360 grados); )

Pase el mouse sobre los bloques para ver las funciones de transformación en acción.

2. Punto de transformación origen-transformación

La propiedad le permite cambiar el centro de transformación, en relación con el cual cambia la posición/tamaño/forma del elemento. El valor predeterminado es centro o 50% 50%. Establecer solo para elementos transformados. No heredado.