El significado de transformar es: cambiar, deformar; convertir
El uso razonable de la transformación en la composición tipográfica hará que nuestra composición tipográfica parezca más alta.
A continuación, les presentaré qué atributos y efectos tiene esta cosita mágica.
1. Rotar
rotar: especifique un efecto en el elemento original a través del parámetro de ángulo especificado.
Si el valor establecido es positivo, significa rotación en el sentido de las agujas del reloj, si el valor establecido es negativo, significa rotación en el sentido contrario a las agujas del reloj. Tales como: transformar: rotar (30 grados);
2. Traducción móvil
translate() se mueve desde la posición actual del elemento de acuerdo con los parámetros proporcionados para las posiciones izquierda (eje X) y superior (eje Y).
Tales como: transformar: traducir (100px, 20px):
translateX especifica una traducción
dando un número en la dirección X. Solo mueva el elemento al eje X, y su punto base es el punto central del elemento. También puede cambiar la posición del punto base según transform-origin transform:translateX(100px):
translateY especifica una traducción por el número dado de
direcciones Y. Solo muévase al eje Y, el punto base está en el punto central del elemento, y la posición del punto base se puede cambiar a través de transform-origin. transformar: traducir Y (20px):
3. Escala de zoom
La escala de escala y la traducción en movimiento son algo similares, y hay tres situaciones: Echemos un vistazo a los métodos de uso específicos de estas tres situaciones:
Nota: El valor predeterminado es 1, y su valor es mayor que 1 cuando se amplía y menor que 1 cuando se aleja.
1. scale(x,y) define una transformación de escala 2D para cambiar el ancho y el alto de un elemento.
Tales como: transformar: escala (2,1.5);
2. scaleX( n ) define una transformación de escala 2D para cambiar el ancho del elemento.
Por ejemplo: transform:escalaX(2):
3. scaleY( n ) define una transformación de escala 2D para cambiar la altura del elemento.
如：transformar:escalaY(2):
4. Sesgo de distorsión
1. sesgo ( ángulo x , ángulo y ) define una transformación de sesgo 2D, a lo largo de los ejes X e Y.
如：transformar: sesgo (30 grados, 10 grados);
imagen
2. skewX( angle ) define una transformación de sesgo 2D, a lo largo del eje X.
如：transformar:sesgoX(30grados);
3. skewY( angle ) define una transformación de sesgo 2D, a lo largo del eje Y.
Tales como: transform: skewY(10deg);
matrix(, , , , , ) : especifique una transformación 2D en forma de una matriz de transformación de seis valores (a,b,c,d,e,f) , que es equivalente a aplicar directamente una matriz de transformación [abcdef]. Consiste en reposicionar elementos en función de la dirección horizontal (eje X) y la dirección vertical (eje Y).Este valor de propiedad utiliza una matriz relacionada con las matemáticas.
Cambiar origen de transformación del punto base del elemento
Cambiar el origen de transformación del punto base del elemento
Ya mencionamos transform-origen muchas veces, su función principal es permitirnos cambiar la posición del punto base del elemento antes de realizar la acción de transformar, porque el punto base predeterminado de nuestro elemento es su posición central, en otras palabras, hicimos no usar transformación: cuando el origen cambia la posición del punto base del elemento, las operaciones como rotar, trasladar, escalar, sesgar y matriz realizadas por la transformación se modifican en función de la posición central del propio elemento. Pero a veces necesitamos realizar estas operaciones en elementos en diferentes posiciones, luego podemos usar transform-origin para cambiar la posición del punto base del elemento, de modo que el punto base del elemento no esté en la posición central, para lograr la posición del punto base que necesita. Echemos un vistazo a sus reglas de uso:
transform-origin(X,Y): Se utiliza para establecer el punto base (punto de referencia) del movimiento del elemento. El punto predeterminado es el punto central del elemento. Los valores de X e Y pueden ser valores porcentuales, em, px y X también pueden ser valores de parámetros de caracteres a la izquierda, al centro, a la derecha; Y y X también pueden establecer valores de caracteres en la parte superior, central e inferior en Además de los valores porcentuales. Esto se parece un poco a nuestra configuración de posición de fondo; enumeraré su escritura correspondiente a continuación:
1. arriba a la izquierda | arriba a la izquierda es equivalente a 0 0 | 0% 0%
2. arriba | arriba centro | centro arriba es equivalente al 50% 0
3. arriba a la derecha | arriba a la derecha es equivalente a 100% 0
4. izquierda | centro izquierda | centro izquierda es equivalente a 0 50% | 0% 50%
5. centro | centro centro es equivalente a 50% 50% (valor por defecto)
6. Derecha|derecha centro|centro derecha equivale a 100% 50%
7. abajo a la izquierda | abajo a la izquierda es equivalente a 0 100% | 0% 100%
8. abajo | abajo centro | centro abajo es equivalente a 50% 100%
9. abajo a la derecha | abajo a la derecha es equivalente a 100% 100%
Entre ellos, izquierda, centro derecha son valores en la dirección horizontal, y los valores porcentuales correspondientes son izquierda = 0%; centro = 50%; derecha = 100% y la parte superior central inferior es el valor en la dirección vertical, donde top=0%;center= 50%;bottom=100%; Si solo se toma un valor, significa que el valor en la dirección vertical permanece sin cambios. Veamos los siguientes ejemplos
(1) origen de la transformación: (izquierda, arriba):
(2)transformar-origen:derecha
(3) origen transformado (25%, 75%)