Gerador de Transformação CSS

O CSS Transform Generator é um editor visual para a propriedade de transformação CSS Você move um controle deslizante para cada função de transformação - translate, gire, escalar, inclinar, e as funções 3 D rodarX, rotateY e perspectiva - e observe o efeito se aplicar a um elemento de visualização em tempo real, em seguida, copie o CSS exato que ele produz Também permite definir transform-origem, o ponto de ancoragem em cada rotação e escala gira em torno.

A propriedade de transformação reposiciona e remodela um elemento sem perturbar o layout em torno dele Um elemento traduzido, girado ou dimensionado ainda ocupa sua caixa original no fluxo, de modo que os elementos vizinhos não se movem, que é o que faz transformar a ferramenta correta para efeitos de hover, animações de entrada e qualquer movimento que não deve desencadear um refluxo Várias funções podem ser listadas em uma declaração, e elas são aplicadas da direita para a esquerda no espaço de coordenadas do elemento, de modo que a ordem realmente muda o resultado: translate então gire move o elemento e depois gira no lugar, enquanto gira em seguida, translate gira os eixos primeiro e envia o elemento para fora em um ângulo.

Tudo acontece no seu navegador Comece a partir de uma predefinição como Crescer, Girar, Virar ou Cartão 3 D, ajuste cada função e copie a declaração A ferramenta escreve apenas as funções que você realmente mudou, para que você nunca envie uma escala redundante (1) ou gire (0 deg) Nenhuma conta, sem uploads, e ele continua funcionando offline uma vez que a página tenha carregado.

Dois detalhes salvam o tempo de depuração real Primeiro, as rotações 3 D só parecem tridimensionais quando uma perspectiva está presente - ou uma função de perspectiva () primeiro na mesma transformação, como esta ferramenta a emite, ou uma propriedade de perspectiva no pai - caso contrário, rotateY simplesmente esmaga o elemento plano Segundo, qualquer elemento com uma transformação diferente de nenhum se torna um bloco de contenção para seus descendentes fixos e absolutamente posicionados e cria um novo contexto de empilhamento, exatamente como a propriedade de filtro Uma posição: filho fixo dentro de um pai transformado ancora para esse pai em vez da viewport, e ordenação de índice z que funcionou antes pode mudar Quando uma transformação quebra um layout de uma maneira que não tem nada a ver com sua aparência, esse comportamento de bloqueio de contenção é quase sempre a razão.