Conversor de cores
Converta HEX, RGB e HSL com transparência, veja a amostra e copie valores CSS prontos para usar.
Gerador de transformações CSS 2D e 3D
Configure deslocamento, rotação, escala, inclinação e origem, com perspectiva e controles 3D opcionais.
Opções 3D
Prévia
O contorno tracejado indica a posição original. A ordem das transformações afeta o resultado; o CSS exportado usa a mesma ordem da prévia.
CSS
Sobre a ferramenta
Posicione ou incline um elemento comparando-o ao contorno original.
Como usar
Ajuste o deslocamento X/Y, a rotação, as escalas, a inclinação e a origem da transformação, comparando com o contorno inicial. Ative 3D para acrescentar perspectiva, deslocamento Z e rotações X/Y. Copie ou baixe transform e transform-origin juntos.
A prévia e a saída usam os mesmos valores em uma ordem fixa; reorganizar as funções pode mudar o resultado. Escalas negativas espelham o elemento e uma escala zero o comprime naquele eixo. A ferramenta gera estilos, não modelos 3D ou animações completas.
Perguntas frequentes
Posso trocar a ordem das funções?
Você pode mudar a ordem editando o CSS exportado; a interface não tem um controle para reordenar as funções. Prévia e exportação usam a mesma ordem fixa, e alterá-la pode mudar o resultado. Escala negativa inverte o eixo; zero o achata.
Por que um elemento deslocado ou ampliado deixa o espaço original no layout?
Transformações CSS alteram a aparência sem mover a caixa original do elemento no layout. Por isso, o conteúdo vizinho mantém sua posição. Use as regras de layout para ajustar espaçamentos e transform-origin para escolher o ponto de referência da transformação visual.
Ferramentas relacionadas
Abre em uma nova aba
Comentários
0