Transforma
Cansado de tudo parecendo um retângulo perfeito? a extensão Transform dá a você o poder de torcer, inclinar e remodelar qualquer widget ou Elementos Elementor Adicione uma inclinação sutil a um cartão de testemunho, gire um título para efeito dramático ou dimensione uma imagem no hover com precisão (tudo com controles visuais simples) É a ferramenta secreta para criar layouts nervosos, dinâmicos, verdadeiramente únicos que se destacam do visual padrão do modelo Vá além do posicionamento básico e dê aos seus elementos uma nova dimensão.
Inclinar e girar nos eixos X e Y
Faça seus elementos se inclinarem, inclinarem ou aparecerem em perspectiva Controle independentemente os valores Skew X e Skew Y para criar formas de paralelogramo ou inclinações dinâmicas Combine isso com Gire para girar seu elemento no espaço 2 D ou 3 D, quebrando o rígido alinhamento horizontal do web design típico.
- Inclinação dinâmica: aplique um Skew X para fazer um contêiner parecer inclinado para frente ou para trás.
- Rotação precisa: Gire os elementos em graus precisos para layouts criativos e designs sobrepostos.
- Combine efeitos: gire um botão e gire-o ligeiramente para uma call-to-action divertida e desequilibrada.
Cresça, diminua e adicione profundidade ao passar o mouse
Crie momentos interativos que respondam aos seus visitantes Use a propriedade Escala para fazer um ícone ou imagem crescer ao pairar, desenhando o olho Adicione Perspectiva a um recipiente pai para fazer os elementos filhos girarem no espaço 3 D, criando uma sensação de profundidade e imersão que os designs planos não conseguem igualar.
- Escala baseada em hover: defina um estado de hover como Escala: 1.1 para um efeito de crescimento suave e envolvente em botões ou cartões.
- Profundidade semelhante a 3 D: use a configuração Perspectiva para fazer com que vários elementos girados pareçam parte de uma cena 3 D unificada.
- Controle a Origem: Altere a Transformar Origem para fazer um elemento escalar a partir de seu centro, topo ou canto.
Perguntas frequentes para transformações
Inclinar ou girar meu texto tornará difícil a leitura?
Pode, se você for ao mar A chave é a sutileza Uma ligeira rotação de 2-5 graus ou inclinação pode adicionar enorme interesse visual sem prejudicar a legibilidade Sempre visualize e teste em diferentes dispositivos Para o corpo de texto importante, é melhor manter as transformações mínimas ou aplicá-las apenas em elementos decorativos.
Posso usar isso para criar um cartão flip 3 D?
Você pode chegar muito perto! combinando o Rotate Y (para o flip) com o Perspective em um contêiner pai, você pode criar um cartão que parece virar Você usaria dois elementos (frente e verso) e alternaria sua visibilidade com interações mais avançadas ou código personalizado para uma solução completa.
Esses efeitos funcionam em dispositivos móveis?
As transformadas CSS usadas são amplamente suportadas em navegadores móveis modernos No entanto, perspectivas 3 D complexas ou animações intensas podem ter um melhor desempenho no desktop É sempre uma boa ideia verificar seu design em um telefone real e simplificar os efeitos para dispositivos móveis, se necessário.
Como isso é diferente da extensão Floating Effects?
Ótima pergunta! efeitos flutuantes é para animações automáticas e contínuas (como um movimento de salto ou deriva).A extensão Transform é sobre a mudança da forma e posição do núcleo de um elemento (skew, girar, escala), muitas vezes de forma estática ou como uma interação única (como um efeito hover) Eles podem ser usados juntos! por exemplo, você poderia ter um cartão ligeiramente inclinado (Transformar) e também pulsos suaves (Efeitos Flutuantes).
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
