As transformações 2D em CSS nos permitem realizar algumas operações básicas de transformação no espaço bidimensional, como mover, girar, dimensionar ou torcer, etc. Os elementos transformados são semelhantes aos elementos posicionados de forma absoluta e não afetarão os elementos circundantes, mas podem ser combinados com a sobreposição dos elementos circundantes. A diferença é que o elemento convertido ainda ocupará o espaço antes da conversão na página.
Vamos apresentar a conversão 2D:
1. Mova traduzir()
De acordo com os parâmetros fornecidos pelas posições esquerda (eixo X) e superior (eixo Y), mover-se da posição atual do elemento pode alterar a posição do elemento na página, semelhante ao posicionamento.
1. Gramática:
transformar:traduzir(x,y);
Ou você pode escrevê-los separadamente
transformar:traduzirX(n);transformar:traduzirY(n);
2. Pontos-chave:
(1) Definir movimento na transformação 2D e mover elementos ao longo dos eixos X e Y;
(2) A maior vantagem da tradução é que ela não afetará a posição de outros elementos;
(3) A porcentagem de tradução em si é relativa ao seu próprio elemento de tradução (50%, 50%);
(4) Não tem efeito em tags inline;
Exemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></body></html>Resultados em execução:
2. Gire, gire ()
O método rotate() gira um elemento no sentido horário em um determinado grau. São permitidos valores negativos, o que faz com que o elemento gire no sentido anti-horário.
Sintaxe: transfrom:rotate (grau de rotação)
Pontos principais:
girar (grau), a unidade é graus. Por exemplo: girar (45 graus);
Se o ângulo for positivo, é no sentido horário; se for negativo, é anti-horário;
Por padrão, o ponto central no sentido horário é o ponto central do elemento;
Exemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <body><div></div></body></html>Resultados em execução:
3. Origem da transformação do ponto central da transformação 2D:
gramática:
origem da transformação:xy;
Pontos principais:
(1) Observe que x e y estão separados por espaços;
(2) O ponto central padrão de xy é o ponto central do elemento (50% 50%);
(3) Você também pode definir pixels ou substantivos de direção para xy (direita esquerda centro inferior superior);
4. Escala de zoom()
método scale(), o tamanho do elemento aumenta ou diminui, dependendo dos parâmetros de largura (eixo X) e altura (eixo Y):
(1) Modifique o tamanho do elemento, amplie ou reduza o elemento
(2) Se for um número negativo, será revertido.
(3) O formato da sintaxe da função é o seguinte:
escala(sx,sy)
Onde sx representa a proporção de escala na direção horizontal e sy representa a taxa de escala na direção vertical. Além disso, o parâmetro sy pode ser omitido e seu valor padrão é igual a sx.
Exemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>Resultados em execução:
5. Inclinação()
Contém dois valores de parâmetro, indicando o ângulo de inclinação do eixo X e do eixo Y, respectivamente. Se o segundo parâmetro estiver vazio, o padrão é 0. Um parâmetro negativo significa inclinação na direção oposta.
(1) inclinaçãoX(<ângulo>); significa inclinação apenas no eixo X (direção horizontal).
(2) inclinaçãoY(<ângulo>); significa inclinação apenas no eixo Y (direção vertical).
(3) Faça os elementos inclinarem-se em direções diferentes.
(4) inclinação (a) é igual a inclinação (a,0)
(5)inclinação(x,y)
(6) Ângulo unitário graus
Exemplo:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /head><body><div></div></body></html>Resultados em execução:
6. matriz()
A função array() pode ser considerada como a abreviatura de várias funções: skew(), scale(), rotate() e translate(). Todas as operações de conversão 2D podem ser definidas ao mesmo tempo através da função array(). o formato de sintaxe da função é o seguinte:
matriz(a,b,c,d,tx,ty)
Os seis parâmetros na função array() correspondem a scaleX(), skewY(), skewX(), scaleY(), translateX() e translateY() respectivamente. Você pode usar array() para implementar várias operações 2D. , como:
traduzir(tx,ty)=matriz(1,0,0,1,tx,ty);：
onde tx e ty são os valores de translação horizontal e vertical;
girar(a)=matriz(cos(a),sin(a),-sin(a),cos(a),0,0);
onde a é o valor do grau. Você pode reverter a rotação trocando os valores sin(a) e -sin(a);
escala(sx,sy)=matriz(sx,0,0,sy,0,0);
onde sx e sy são os valores de escala horizontal e vertical;
inclinação(ax,ay)=matriz(1,tan(ay),tan(ay),1,0,0);
onde ax e ay são os valores horizontais e verticais em graus.
Exemplo:
<!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);}.dois{margem esquerda:35px;transform:matrix(0,586,0,8,-0,8,0,686,0,0);}.três{margem esquerda:40px;margem- top:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.four{transform:matrix(0.586,0.8,-0.8,0.586,40,30);}</style>< /head><body><divclass=one></div><divclass=two></div><divclass=três></div><divclass=four></div></body></html>Resultados em execução:
O método Matrix() e o método de transformação 2D são mesclados em um.
O método matricial possui seis parâmetros, incluindo funções de rotação, escala, movimento (translação) e inclinação.
Use uma matriz para expressar a matriz da quantidade de transformação (a,b,c,d,x,y)
●acx
●adeus
●0 0 1
Vamos praticar usando um caso específico:
O código é o seguinte:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Documento</title><style>corpo{margem:100px;}.transformElement{largura:200px;altura:200px;cor de fundo:vermelho;transição:all1slinear;float:esquerda;posição:relativa;esquerda: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);}. relógio{largura:400px;altura:400px;raio da borda:50%;cor de fundo:#Faa;posição:relativa;}.stick{largura:4px;altura:200px;cor de fundo:azul;posição:absoluto; esquerda:198px;top:0;transição:all12slinear;transform-origin:centerbottom;}.stickshort{largura:8px;altura:100px;cor de fundo:rgb(142,21,248);posição:absoluta;esquerda:196px;topo :100px;transição: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></corpo></html>Resultados em execução:
