Las transformaciones 2D en CSS nos permiten realizar algunas operaciones de transformación básicas en un espacio bidimensional, como mover, rotar, escalar o girar, etc. Los elementos transformados son similares a elementos absolutamente posicionados y no afectarán a los elementos circundantes, pero se pueden combinar. con Los elementos circundantes se superponen. La diferencia es que el elemento convertido seguirá ocupando el espacio antes de la conversión en la página.
Introduzcamos la conversión 2D:
1. Mover traducir()
De acuerdo con los parámetros dados por las posiciones izquierda (eje X) y superior (eje Y), moverse desde la posición actual del elemento puede cambiar la posición del elemento en la página, similar al posicionamiento.
1. Gramática:
transformar: traducir (x, y);
O puedes escribirlos por separado
transformar: traducirX (n); transformar: traducirY (n);
2. Puntos clave:
(1) Definir movimiento en transformación 2D y mover elementos a lo largo de los ejes X e Y;
(2) La mayor ventaja de traducir es que no afectará la posición de otros elementos;
(3) El porcentaje de traducción en sí es relativo a su propio elemento traducido (50%, 50%);
(4) No tiene ningún efecto sobre las etiquetas en línea;
Ejemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></body></html>Resultados de ejecución:
2. Girar girar()
El método rotar() gira un elemento en el sentido de las agujas del reloj un grado determinado. Se permiten valores negativos, lo que hace que el elemento gire en sentido antihorario.
Sintaxis: transfrom:rotate (grado de rotación)
Puntos clave:
rotar (grados), la unidad es grados Por ejemplo: rotar (45 grados);
Si el ángulo es positivo, es en el sentido de las agujas del reloj, si es negativo, es en el sentido contrario a las agujas del reloj;
De forma predeterminada, el punto central en el sentido de las agujas del reloj es el punto central del elemento;
Ejemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <cuerpo><div></div></body></html>Resultados de ejecución:
3. Origen de transformación del punto central de transformación 2D:
gramática:
origen-transformación:xy;
Puntos clave:
(1) Tenga en cuenta que xey están separados por espacios;
(2) El punto central predeterminado de xy es el punto central del elemento (50% 50%);
(3) También puede configurar píxeles o nombres de dirección para xy (derecha, izquierda, centro, parte inferior superior);
4. Escala de zoom()
método scale(), el tamaño del elemento aumenta o disminuye, dependiendo de los parámetros de ancho (eje X) y alto (eje Y):
(1) Modificar el tamaño del elemento, ampliar o reducir el elemento
(2) Si es un número negativo, se revertirá.
(3) El formato de sintaxis de la función es el siguiente:
escala(sx,sy)
Donde sx representa la relación de escala en la dirección horizontal y sy representa la relación de escala en la dirección vertical. Además, el parámetro sy se puede omitir y su valor predeterminado es igual a sx.
Ejemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>Resultados de ejecución:
5. Sesgar()
Contiene dos valores de parámetros, que indican el ángulo de inclinación del eje X y del eje Y respectivamente. Si el segundo parámetro está vacío, el valor predeterminado es 0. Un parámetro negativo significa inclinación en la dirección opuesta.
(1) skewX(<ángulo>); significa inclinar solo en el eje X (dirección horizontal).
(2) skewY(<ángulo>); significa inclinar solo en el eje Y (dirección vertical).
(3) Hacer que los elementos se inclinen en diferentes direcciones.
(4) sesgo(a) es igual a sesgo(a,0)
(5) sesgo (x, y)
(6) Ángulo unitario grados
Ejemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /cabeza><cuerpo><div></div></cuerpo></html>Resultados de ejecución:
6. matriz()
La función Matrix () puede considerarse como la abreviatura de varias funciones: skew (), escala (), rotar () y traducir (). Todas las operaciones de conversión 2D se pueden definir al mismo tiempo a través de la función Matrix (). El formato de sintaxis de la función es el siguiente:
matriz(a,b,c,d,tx,ty)
Los seis parámetros en la función Matrix () corresponden a ScaleX (), SkewY (), SkewX (), ScaleY (), TranslateX () y TranslateY () respectivamente. Puede usar Matrix () para implementar varias conversiones 2D. , como:
traducir(tx,ty)=matriz(1,0,0,1,tx,ty);：
donde tx y ty son los valores de traslación horizontal y vertical;
rotar(a)=matriz(cos(a),sin(a),-sin(a),cos(a),0,0);
donde a es el valor del grado. Puede invertir la rotación intercambiando los valores sin(a) y -sin(a);
escala(sx,sy)=matriz(sx,0,0,sy,0,0);
donde sx y sy son los valores de escala horizontal y vertical;
sesgar(ax,ay)=matriz(1,tan(ay),tan(ay),1,0,0);
donde ax y ay son los valores horizontal y vertical en grados.
Ejemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;float:left;}.one{transform:matrix(0.866,0.5, -0.5,0.866,0,0);}.dos{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}.tres{margin-left:40px;margin- arriba:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.cuatro{transform:matrix(0.586,0.8,-0.8,0.586,40,30);}</style>< /cabeza><cuerpo><divclass=uno></div><divclass=dos></div><divclass=tres></div><divclass=cuatro></div></cuerpo></html>Resultados de ejecución:
El método Matrix() y el método de transformación 2D se fusionan en uno.
El método matricial tiene seis parámetros, que incluyen funciones de rotación, escala, movimiento (traslación) e inclinación.
Utilice una matriz para expresar la cantidad de transformación matriz (a,b,c,d,x,y)
●acx
●bdy
0 0 1
Practiquémoslo usando un caso específico:
El código es el siguiente:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< título>Documento</título><estilo>cuerpo{margin:100px;}.transformElement{ancho:200px;alto:200px;color de fondo:rojo;transition:all1slinear;float:left;position:relative;left:0; color:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px;background-color:blue;transition:all1slinear;float:left;}.transformElement:hover{/*transform :translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5)*/transform:skew(-45deg,45deg);}. reloj{ancho:400px;alto:400px;radio-borde:50%;color de fondo:#Faa;posición:relativa;}.stick{ancho:4px;alto:200px;color de fondo:azul;posición:absoluta; izquierda:198px;arriba:0;transición:all12slinear;transformar-origin:centerbottom;}.stickshort{ancho:8px;alto:100px;color de fondo:rgb(142,21,248);posición:absoluta;izquierda:196px;arriba :100px;transition:all12slinear;transform-origin:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320deg);}.clock:hover.stickshort{transform:rotate(360deg);} </style></head><body><!--<div></div><div></div>--><div><div></div><div></div>< /div></body></html>Resultados de ejecución:
