Gerador de transformação CSS3: dimensionar, girar, traduzir e inclinar

CSS3.0 Transform

Gerador de transformação CSS para pessoas preguiçosas.

Defina a escala, gire, traduza e incline e assista à visualização ao vivo para obter a visualização desejada.

Evite definir valores extremos para a propriedade skew porque a visualização pode cobrir o painel de configurações. Nesta situação, você terá que atualizar a página.

 

Dimensionar, girar, traduzir e inclinar

A escala funciona da mesma forma que você aumentaria e diminuiria o elemento-alvo. O valor da escala padrão é 1, que funciona como um multiplicador do tamanho original. Isso significa que 0,5 metades enquanto 2 dobra a seção.

 

Gire o elemento no sentido horário com a segunda propriedade definida em graus. Girar 180 ° coloca o objeto de cabeça para baixo enquanto a captura 360 ° volta à sua posição vertical original. Defina qualquer valor positivo ou negativo ou mesmo decimais.

 

Traduzir desloca o elemento com pixels relacionados à sua posição original. O valor X horizontalmente enquanto Y verticalmente quando há atributo de rotação é zero.

 

Incline os objetos em seus eixos horizontal (X) ou vertical (Y).

 

Transformação CSS explicada 

A propriedade transform CSS permite girar, dimensionar, inclinar e traduzir um elemento. Ele modifica o espaço de coordenadas do modelo de formatação visual CSS.

Definição e Uso

A propriedade de transformação aplica uma transformação 2D ou 3D a um elemento. Esta propriedade permite girar, dimensionar, mover, inclinar, etc., elementos.

Suporte para navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Números seguidos por -webkit-, -moz- ou -o- especificam a primeira versão que funcionou com um prefixo.

Sintaxe
transform: none|transform-functions|initial|inherit;