A primeira vez a rotateY Eu tinha certeza de que iria inclinar um cartão na tela apenas esmagado-lo plana em vez disso, EU perdi a maior parte de uma tarde antes de entender o porquê Não havia perspectiva Eu tinha escrito a rotação, mas não a única função que faz uma rotação ler como profundidade, e CSS fez exatamente o que EU disse em vez do que EU quis dizer Naquela tarde é toda a razão pela qual EU agora construir transforma arrastando controles deslizantes e observando uma caixa responder, em vez de digitar um valor, salvar, atualizar e apertar os olhos.
O CSS transform a propriedade é uma das coisas mais úteis na linguagem e uma das mais fáceis de errar sutilmente Ele se move, gira, escala e distorce um elemento sem perturbar nada ao seu redor, e é por isso que todo efeito hover, cada elevador de cartas, cada animação de entrada se inclina sobre ele Mas ele embala muito comportamento em uma string curta, a ordem das funções muda o resultado, e as funções 3 D têm uma dependência que é invisível até que você a atinja Um valor que você pode ver sendo construído vale muito mais do que um valor que você tem que imaginar.
o Gerador de Transformação CSS dá-lhe um controle deslizante para cada função, traduzir, girar, escala, inclinação e o trio 3 D de rotateX, rotateY e perspectiva, e aplica cada mudança para um elemento de visualização ao vivo como você fazê-lo Ele também permite definir a transformação-origem, o ponto de ancoragem que rotações e escala giram em torno da declaração exata fica em uma caixa pronta para cópia abaixo, contendo apenas as funções que você tocou.
tl;dr: O CSS
transforma propriedade reposiciona e remodela um elemento sem afetar o layout da página, que é o que o torna a ferramenta certa para efeitos de hover e animação As funções se aplicam da direita para a esquerda, portanto, a ordem é importante; As rotações 3 D precisam de umperspective()para olhar tridimensional; e qualquer elemento transformado torna-se um bloco de contenção para seus filhos fixos e absolutos Este gerador expõe cada função com uma visualização ao vivo, emite apenas as funções que você muda, e produz CSS limpo você pode colar direto em uma folha de estilo Ele é executado inteiramente em seu navegador sem inscrição.
Que problema resolve um gerador de transformação CSS?
o transform propriedade é abstrata da mesma forma CSS Grid é abstrato Você não está movendo pixels diretamente; você está descrevendo uma operação geométrica e deixando o navegador calcular o resultado. translateX(40px) rotate(15deg) scale(1.1) é uma instrução precisa, mas não há como sentir o resultado de encadear esses três apenas do texto Você tem que renderizá-lo E renderizá-lo em seu próprio projeto significa o loop write-save-refresh, que é lento o suficiente para que a maioria das pessoas pare de experimentar muito antes de ter encontrado o valor que deseja.
Um gerador colapsa esse loop para nada Você arrasta o controle deslizante de rotação e a caixa gira em tempo real Você eleva a escala e ela cresce a partir de seu centro Você adiciona uma translação e ela desliza enquanto mantém sua vez Dez minutos disso e a relação entre os números e o movimento deixa de ser algo que você traduz em sua cabeça e se torna algo que você sente Quando você termina, não há nada para transcrever, porque o CSS de trabalho foi escrito para você o tempo todo.
Há um segundo benefício que importa mais do que parece Construir a transformação por manipulação significa que a ferramenta só pode emitir CSS válido e bem formado Você não pode produzir um quebrado transform valor arrastando um controle deslizante, para que a saída seja sempre segura para colar Essa confiabilidade é o motivo pelo qual mantenho uma prateleira de construtores visuais de CSS próxima, o mesmo motivo pelo qual alcanço o gerador caixa-sombra em vez de contar deslocamentos de sombra manualmente.
Por que a ordem das funções transformadas importa?
Este é o único detalhe que mais faz as pessoas tropeçarem, e vale a pena entender em vez de trabalhar ao redor Quando você lista várias funções em uma transform, o navegador aplica-los direita para a esquerda, cada um operando no espaço de coordenadas deixado pelo anterior Isso significa que a ordem realmente muda onde o elemento acaba.
Levar translateX(100px) rotate(45deg) contra rotate(45deg) translateX(100px). No primeiro, o elemento é traduzido cem pixels e depois girado no lugar, então ele fica cem pixels à direita e gira quarenta e cinco graus No segundo, a rotação acontece primeiro, que gira os eixos coordenados do elemento & #39; s, e a translação então o move cem pixels ao longo do rodado Eixo X, enviando-o diagonalmente para baixo e para a direita Mesmas duas funções, mesmos dois valores, posições completamente diferentes.
O gerador emite suas funções em uma ordem deliberada, perspectiva primeiro, depois traduzir, depois girar, depois dimensionar, depois inclinar, que é um padrão sensato que mantém os casos comuns se comportando intuitivamente Mas uma vez que você entende que a ordem é significativa, você também entende por que copiar uma transformação de um lugar para outro às vezes produz um resultado que você não esperava: você moveu a string, mas não o modelo mental por trás dela Construindo-a você mesmo, e vendo cada função & #39; s contribuição, é como esse modelo é construído.
Como faço uma transformação 3 D parecer 3 D?
Aqui está a armadilha que me custou naquela tarde As funções rotateX e rotateY gire um elemento em torno dos eixos horizontal e vertical, que deve incliná-lo em direção ou para longe de você como uma página girando Mas por padrão não há profundidade na cena, então a rotação é projetada diretamente no plano plano da tela e o elemento simplesmente parece comprimir A rotateY(60deg) sem perspectiva parece que o elemento ficou mais estreito, não como se tivesse girado.
O ingrediente que falta é perspective, e há duas maneiras de fornecê-lo Você pode colocar um perspective propriedade no elemento pai, que estabelece um ponto de fuga compartilhado para todos os seus filhos 3 D, ou você pode adicionar um perspective() função logo no início do elemento & #39; próprio transform, que dá a esse elemento sua própria profundidade Este gerador usa a segunda abordagem: defina o controle deslizante de perspectiva e ele emite perspective() primeiro na cadeia, exatamente onde precisa estar Valores menores, algo entre trezentos e seiscentos pixels, colocam o ponto de fuga próximo ao elemento e tornam a profundidade dramática; valores maiores achatam o efeito em direção a uma inclinação suave.
A predefinição do Cartão 3 D na ferramenta é a maneira mais rápida de ver isso Ele define uma perspectiva de seiscentos pixels e a rotateY de vinte e cinco graus, e as pontas da caixa de visualização convincentemente na tela Vire o controle deslizante de perspectiva de volta para zero e veja a mesma rotação entrar em colapso em um squash plano Esse antes e depois é toda a lição em dois arrastamentos.
O que faz a origem transformada?
Cada rotação e cada escala precisam de um ponto fixo para girar, e esse ponto é a origem da transformação. Por padrão, fica no ponto morto do elemento, e é por isso que não é modificado rotate gira uma caixa no meio e não é modificada scale cresce-o para fora em todas as direções ao mesmo tempo. Mova a origem e ambos os comportamentos mudam.
Defina a origem para top left e uma rotação se torna um balanço, o elemento girando de seu canto superior esquerdo como um sinal articulado Defina-o para bottom e um scaleY aumenta o elemento para cima a partir de sua base, em vez de expandi-lo simetricamente, que é exatamente o que você deseja para uma barra que deve subir a partir do eixo de um gráfico O gerador oferece todas as nove posições de palavras-chave, o centro, as quatro arestas e os quatro cantos, e atualiza a visualização no instante em que você escolhe um, de modo que a diferença entre um giro e um balanço é um clique de distância.
Esta é uma daquelas propriedades que é quase invisível até que você precise, e então é a única coisa que produz o efeito que você está atrás Um menu que deve se desdobrar a partir de sua borda superior, uma dica de ferramenta que deve escalar para fora do elemento ao qual pertence, um cartão que deve girar em torno de um canto em vez de seu meio, todos eles são de origem transformada, e nenhum deles é óbvio a partir do transform valor sozinho.
Por que a transformação não empurra outros elementos?
Uma das propriedades mais úteis de transform é também o que as pessoas acham mais surpreendente na primeira vez que ele morde-los Um elemento transformado não afeta o layout em torno dele Quando você traduzir uma caixa quarenta pixels para a direita, ele renderiza quarenta pixels para a direita, mas ainda reserva seu espaço original no fluxo de documentos, então nada mais se move para preencher a lacuna e nada é empurrado de lado Transform é um efeito de tempo de pintura, aplicado após layout já foi computado.
Este é um recurso, não um bug, e é precisamente o que faz transformar a ferramenta correta para animação Porque mover um elemento com transform não aciona um reflow, o navegador pode compor a mudança na GPU e manter a animação em sessenta quadros por segundo Movendo o mesmo elemento com top ou left ou margin força o navegador a recalcular o layout em cada quadro, que é a causa mais comum de animação que gagueja e solta quadros Se você quiser um movimento suave, você anima transform e opacity& you leave the layout properties alone Quando você precisa do conteúdo circundante para refluir, isso é um sinal de que você quer uma mudança de layout em vez de uma transformação, e uma ferramenta como o gerador flexbox ou o Gerador de rede CSS é o lugar certo para começar.
Por que uma criança fixa quebrou dentro do meu elemento transformado?
Este é o gotcha que parece um bug em algo não relacionado, e vale a pena saber antes que ele custa uma hora A especificação diz que qualquer elemento com um transform valor diferente de none torna-se um bloco de contenção para seus descendentes que estão posicionados fixed ou absolute, e também cria um novo contexto de empilhamento. Ambos têm consequências que surgem longe da própria transformação.
A mudança de bloco de contenção é aquela que surpreende as pessoas. A position: fixed o elemento deve ancorar na janela de visualização, permanecendo colocado enquanto a página rola. Mas se algum ancestral desse elemento fixo tiver uma transformação, o elemento fixo será ancorado aquele antepassado em vez disso, e de repente o seu & quot; fixo" cabeçalho rola para longe com o conteúdo ou o seu modal fica preso dentro de um cartão Nada sobre a transformação' s aparência sugere isso; o elemento parece bem, e algo três níveis para baixo posiciona-se erroneamente Quando um elemento fixo ou absoluto se comporta como se estivesse preso, a primeira coisa a verificar é se um ancestral carrega uma transformação A mudança de contexto de empilhamento causa uma classe paralela de confusão, onde um z-index o que costumava funcionar repentinamente não funciona, porque o elemento transformado selou seus filhos em sua própria camada de empilhamento. O mesmo comportamento se aplica exatamente ao filter propriedade, por isso o Gerador filtro CSS carrega o mesmo aviso.
Quais funções o gerador cobre e quando você alcança cada uma?
A ferramenta expõe o conjunto completo de funções de transformação comuns e ajuda a saber para que serve cada uma, em vez de arrastá-las aleatoriamente. Aqui está o mapa.
| Função | O que faz | Uso típico |
|---|---|---|
translateX / translateY |
Move o elemento ao longo de um eixo | Entradas deslizantes, empurrões flutuantes, posicionamento deslocado |
rotate |
Gira o elemento em torno do seu centro (2D) | Emblemas inclinados, carregadeiras giratórias, ângulos de flutuação divertidos |
scale (X e Y) |
Cresce ou encolhe o elemento | Hover zoom, efeitos pop, press-down feedback |
skewX / skewY |
Inclina o elemento ao longo de um eixo | Banners dinâmicos, formas em itálico, sinais de movimento |
rotateX / rotateY |
Gira o elemento no espaço 3 D | Flips de cartão, painéis basculantes, efeitos de fluxo de cobertura |
perspective |
Adiciona profundidade para que as rotações 3 D sejam lidas corretamente | Sempre emparelhado com rotateX ou rotateY |
As duas que precisam de um parceiro são as rotações 3 D, que não fazem nada convincente sem perspectiva, e uma escala negativa, que vale a pena chamar porque não é óbvio Configuração scaleX para um valor negativo vira o elemento horizontalmente, como um espelho, que é como funciona a predefinição Flip Horizontal É um truque genuinamente útil, espelhando um ícone em vez de exportar um segundo ativo, e ele cai diretamente do controle de escala uma vez que você sabe que valores negativos são permitidos.
Como o gerador mantém a visualização honesta?
O modo de falha de qualquer construtor visual é o desvio entre o que a visualização mostra e o que o código exportado produz Uma ferramenta que renderiza sua visualização de uma maneira e escreve seu CSS de outra é pior do que nenhuma ferramenta, porque ensina um valor que não reproduzirá Este gerador evita que, construindo o estilo inline preview' s e a declaração copiada da mesma função, então o que você vê é literalmente o que você cola Não há um segundo caminho de código que possa discordar.
É também por isso que a saída contém apenas as funções que você mudou Saindo scale na sua identidade de um, ou rotate em zero, significa que essas funções estão simplesmente ausentes da string, em vez de serem escritas como redundantes scale(1) ruído. Uma transformação limpa é aquela que você pode ler rapidamente e confiar, e emitir apenas funções significativas é a mesma disciplina na qual confio nas ferramentas visuais CSS, desde o gerador gradiente ao construtor da caixa-sombra Se você está montando um kit mais largo, o Kit de ferramentas para desenvolvedores web coleta aqueles que abro com mais frequência, e os hábitos por trás de usá-los bem estão no Ferramentas de produtividade do desenvolve guia.
Quais navegadores suportam transformações CSS?
As transformadas CSS são suportadas em todos os navegadores atuais e já o são há mais de uma década As funções 2 D, traduzir, girar, escalar e inclinar, são universais e sem prefixo, e as funções 3 D junto com perspective são igualmente bem suportados no Chrome, Firefox, Safari e Edge. O antigo -webkit- e -moz- prefixos que antes eram necessários são peso morto em uma folha de estilo hoje, e a saída deste gerador é CSS padrão e não prefixado que você pode enviar como escrito Para as regras oficiais, as especificações do Módulo de Transformações CSS Nível 1 e Nível 2 do W3 C são as fontes primárias, e vale a pena ler uma vez que o gerador lhe deu a intuição de segui-las.
Se você estiver construindo um kit de ferramentas visuais mais amplo ao lado disso, o gerador fronteira-raio e o construtor de transição são companheiros naturais, uma vez que uma transformação no hover quase sempre quer uma transição para suavizá-lo Tudo aqui é executado no lado do cliente, e o CSS que você copia é seu para usar sem tempo de execução, sem etapa de compilação e sem dependência.
Perguntas frequentes
O que é um gerador de transformação CSS?
Um gerador de transformação CSS é uma ferramenta visual que constrói um valor de transformação CSS a partir de configurações que você escolhe Você ajusta traduzir, girar, dimensionar, inclinar e perspectiva 3 D com controles deslizantes, e ele gera a declaração de transformação junto com uma visualização ao vivo do resultado.
A ordem das funções transformadas importa?
Sim. funções são aplicadas da direita para a esquerda no sistema de coordenadas do elemento, então translate então gire não é o mesmo que gire então translate Traduzindo primeiro move o elemento e depois gira-o no lugar; girando primeiro gira os eixos, então uma translação posterior envia-o em um ângulo.
Como faço uma transformação CSS parecer 3 D?
Uma rotação 3 D precisa de perspectiva para ler como profundidade Adicione uma função de perspectiva () no início da transformação, que este gerador emite quando você define o controle deslizante de perspectiva, ou coloque uma propriedade de perspectiva no elemento pai Valores em torno de 300 a 600 pixels tornam a profundidade mais dramática.
O que faz a origem transformada?
a origem da transformação define o ponto em que uma transformação gira e se escala. O padrão é o centro do elemento. Mova-o para um canto e uma rotação se tornará um balanço a partir desse canto; mova-o para uma borda e a escala cresce a partir dessa borda, em vez de para fora em todas as direções.
Por que a transformação não move outros elementos da página?
Transform é um efeito de tempo de pintura O elemento renderiza em sua nova posição, mas ainda reserva sua caixa original no layout, então nada ao seu redor muda É isso que torna a transformação ideal para animação, e por que você usa margem, posição ou uma propriedade de layout quando você precisa de conteúdo para refluir.
Por que uma criança fixa ou absoluta quebra dentro de um elemento transformado?
Qualquer elemento com uma transformação diferente de nenhum torna-se um bloco de contenção para seus descendentes fixos e absolutamente posicionados e cria um novo contexto de empilhamento Uma posição: filho fixo então ancora ao pai transformado em vez da janela de visualização, e ordenação do índice z pode mover o filho para fora do elemento transformado se ele deve ficar fixo na tela.
Devo animar a transformação em vez de superior, esquerdo, largura ou altura?
Sim, para movimento suave. transformar e opacidade são compostos na GPU e não acionam layout, então eles animam a 60 fps. Animar topo, esquerda, largura ou altura força o navegador a recalcular layout em cada quadro, que é a causa usual de animação janky.
O CSS de transformação gerado é livre e seguro de usar?
Sim. a ferramenta é totalmente gratuita sem limites de inscrição ou uso, e emite CSS padrão e sem prefixo suportado em todos os navegadores modernos Todo o processamento acontece no seu navegador, então nada é carregado e a ferramenta funciona offline depois de carregada.
