O Elementor é um construtor de páginas muito poderoso que permite aos designers criar páginas Web bonitas e funcionais sem conhecimentos de programação. Para além da sua interface intuitiva de arrastar e largar, o Elementor oferece várias ferramentas de design avançadas, tais como Transformação CSS Controlos. Com estes controlos, é possívelAdicionar transformações como rotação, deslocamento, zoom, inclinação e inversão aos elementos da páginacriando um efeito visual distinto.

Neste post, vamos ver como utilizar o Transformação CSS controlos para adicionar efeitos especiais aos seus desenhos, com instruções detalhadas sobre como utilizar cada efeito e cenários de aplicação prática.

O que é o controlo CSS Transform?

O controlo CSS Transform permite-lhe criar um novo controlo CSS Transform utilizando a funçãoRodar, aplicar zoom, deslocar, inclinar e inverteretc.Alterar widgets na páginaEstes controlos estão disponíveis na secção "Elementor's Estes controlos estão listados na secção "Separador avançado"Sob."uma transformação" encontrado nas definições, suporta os estados normal e de foco. Ao editar o estado de hover, também podeDefinir a duração do efeitopara garantir que o efeito é suave e não tremido.

Descrição dos controlos

Cada efeito de transformação pode ser definido com valores diferentes para diferentes pontos de quebra de ecrã. Para obter os melhores resultados em diferentes dispositivos, pode aceder ao ecrã de definições responsivas clicando no ícone do dispositivo no separador do controlo.

Rodar

girarpermite rodar os elementos da página em torno de um eixo específico. A rotação é conseguida através de cursores ou preenchendo diretamente a caixa de entrada com o valor do ângulo (sob a forma de umleitura (num contador)(em unidades), pode ajustar facilmente o efeito de rotação.

• Rotação normal: Roda o elemento ao longo do eixo Z (plano 2D).

• Rotação 3D: Se forem necessários efeitos visuais mais complexos, é possível ativar a rotação 3D, o que permite a X, Y e Z A rotação 3D também pode ser combinada com efeitos de perspetiva (em pixéis) para melhorar a tridimensionalidade.

Aplicações práticas: Por exemplo, pode adicionar um botão com um ícone ao Efeito de rotação 3DQuando o utilizador passa o rato sobre o botão, este roda ligeiramente para dar vida ao design.

Escala

O controlo de zoom permite-lhe dimensionar os elementos da página. Pode escalar proporcionalmente (Escalonamento simultâneo dos eixos X e Y), ou pode ajustar a escala de um eixo individualmente. Os elementos podem ser redimensionados através de barras deslizantes ou digitando uma percentagem diretamente na caixa de entrada.

• Escalonamento igual: Por defeito, os eixos X e Y são escalados ao mesmo tempo, mantendo a escala original do elemento.
• Escalonamento individual: Se pretender escalar numa direção, pode desbloquear a escala para ajustar os eixos X ou Y individuais.

Aplicações práticas: Por exemplo, é possível fazer com que determinados botões ou imagens sejam ligeiramente ampliados quando o utilizador passa o rato sobre eles para chamar a atenção.

Inclinação

magraO controlo permite adicionar um efeito de inclinação ao elemento nos eixos X e Y. O ângulo de inclinação pode ser facilmente ajustado utilizando o cursor ou introduzindo um valor percentual na caixa de entrada.

• Inclinação do eixo X: horizontalDireção Inclinação.
• Inclinação do eixo Y: perpendicularDireção Inclinação.

Aplicações práticas: O efeito de inclinação pode dar uma sensação de dinamismo a uma imagem ou bloco de texto e é particularmente útil para criar designs modernos e únicos.

Inversão horizontal e inversão vertical (Flip)

• Virar horizontalmente: Colocar um elemento no eixo X doespelhamentoFlip.
• Virar verticalmente: Colocar o elemento no eixo YespelhamentoFlip.

Aplicações práticas: Os efeitos de inversão podem ser aplicados a imagens, ícones ou outros elementos visuais para melhorar a experiência interactiva, permitindo que o utilizador veja o outro lado do elemento quando passa o cursor do rato.

Ponto de ancoragem

O controlo Âncora permite-lhe definir o ponto de partida da transformação, ou seja, o ponto central do elemento quando este é rodado, dimensionado ou inclinado. Opcional:

• Fixações horizontais: Esquerda, centro e direita.
• Fixações verticais: Em cima, ao centro e em baixo.

Ao ajustar o ponto de ancoragem, pode controlar o efeito de transformação com maior precisão. Por exemplo, se definir o ponto de ancoragem para o canto superior esquerdo de um elemento, o elemento rodará em torno do canto superior esquerdo quando rodar oEm vez do centro.

Aplicações práticas: Por exemplo, as posições de ancoragem podem ser ajustadas para criar efeitos visuais mais complexos quando se pretendem efeitos de rotação ou inclinação assimétricos.

Como definir a transformação CSS para o estado de foco

No Elementor, não só é possível configurar umTransformações CSS para definir o estado regular de um elemento de páginaTambém pode definir efeitos diferentes para o estado de pairar (ou seja, quando o utilizador passa o ponteiro do rato sobre o elemento). Para editar a transformação do estado de foco, pode:

1. Selecionar o elemento e ir para "Separador avançado".
2. Faça ajustes nas definições de Transformação e escolha efeitos como Rodar, Deslocar, Escalar, Inclinar ou Inverter.

3. Definições"Duração do efeito" para facilitar o processo de transformação.

Aplicações práticas: Na conceção de sítios Web, os efeitos de passagem do rato podem melhorar eficazmente a experiência do utilizador. Por exemplo, os efeitos de rotação e zoom podem ser acionados quando o utilizador passa o rato sobre um botão, fazendo com que o botão pareça mais interessante e interativo.

Exemplo prático: como utilizar a transformação CSS para obter o efeito de botão 3D.

Aqui está um tutorial simples para criar um efeito de botão 3D utilizando o controlo CSS Transform:

1. Adicionar widgets de botões: No editor de páginas Elementor, adicione um widget de botão.
2. Introduzir as definições de transformação: Depois de selecionar o botão, ir para "Separador avançado">"uma transformação".

3. Aplicar efeitos de rotação e de perspetiva:
   • Em Definições de rotação, active a Rotação 3D.
   • Defina os valores de rotação para o eixo X e o eixo Y. Recomenda-se que o ângulo de rotação não exceda 10 graus para garantir a naturalidade.
   • Combine isto com um efeito de perspetiva, por exemplo, defina o valor de perspetiva para 800px para melhorar o efeito 3D.

4. Definir o efeito de pairar: Ao passar o cursor do rato, ajuste o ângulo de rotação para 0 graus e adicione um efeito de zoom definindo o valor de zoom para 1,1 para que o botão faça zoom ao passar o cursor do rato.

Com esta simples transformação, pode criar facilmente um botão interativo com um efeito 3D para melhorar a experiência visual do utilizador.

resumos

A transformação CSS é uma parte importante das poderosas funcionalidades de design do Elementor, permitindo aos designers adicionar efeitos ricos e dinâmicos às páginas com algumas acções simples. Quer se trate de rodar, dimensionar, inclinar ou inverter, todos os controlos podem ser combinados de forma flexível para adicionar dimensão e interesse aos seus designs.