Entrada web front-end al combate real: transformación y transformación

Con las transformaciones CSS3, podemos mover, escalar, rotar, alargar o estirar elementos. Utilice el atributo de transformación para aplicar una transformación a un elemento.

1. Transformación: Transformar elementos.

2. Transición: Controla (tiempo, etc.) el cambio de uno o varios atributos de un elemento, similar a la animación flash interpolada. Pero sólo hay dos claves. Comienza, termina.

1. Conversión 2D CSS3

1. Propiedades de transformación 2D

2. Método de conversión

①.

Translate(x,Y) se mueve horizontal y verticalmente al mismo tiempo (es decir, el eje X y el eje Y se mueven al mismo tiempo).

TranslateX(x) solo se mueve horizontalmente (movimiento del eje x).

TranslateY(Y) solo se mueve verticalmente (movimiento del eje Y).

②.Scale ratio

Escala (x, y) hace que el elemento se escale horizontal y verticalmente (es decir, el eje x y el eje y se escalan al mismo tiempo) .

El elemento ScaleX(x) solo se escala horizontalmente (escalado en el eje X).

Los elementos ScaleY(y) solo escalan verticalmente (escalado en el eje y).

③. Radial

Gira el elemento en el sentido de las agujas del reloj un ángulo determinado. Se permiten valores negativos, por lo que el elemento se gira en sentido antihorario.

④Skew

Skew(x, Y) hace que el elemento se incline en las direcciones horizontal y vertical al mismo tiempo (el eje X y el eje Y se inclinan al mismo tiempo). tiempo y deformarse en un cierto ángulo).

SkewX(x) solo hace que el elemento se incline en la dirección horizontal (deformación de inclinación del eje X).

SkewY(y) solo inclina el elemento en la dirección vertical (inclinación del eje Y).

Gracias por leer. Espero que este artículo sea útil para el estudio de todos.

Haga clic en: Unirse