Transforms

Transforms 2D

Podemos adicionar transformações ao elementos, fazer eles crescerem, girarem, ou se deslocarem, em 2D e também 3D. Transformações que podem ser usadas: scale, rotate, translate, e skew.

Transform scale

O valor Scale pode fazer com que um elemento cresça ou diminua sua dimensão. Exemplo: para fazer com que um elemento cresça em uma proporção equivalente à metade de seu tamanho usamos scale(1.5); Se quisessemos que ele crescesse o dobro do seu tamanho adicionaríamos scale(2); e assim por diante.

Se adicionadas como hover, por exemplo, pode ser interessante também continuar combinando transformações com transições, fazendo com que as trasnformações sejam mais agradáveis de se ver. Podemos usar all para manter a mesma duração por segundos em uma transição. Exemplo:

/* Adicionando transição */
.elemento {
    transition: all 1s;
}

/* Adicionando modificações */
.elemento:hover {
    background-color: green;
    transform: scale(1.5);
}

Transform rotate

Rotate como o próprio nome sugere, é capaz de fazer um elemento rotacionar. Podemos fazer com que ele gire usando deg ou turn como valor, 1turn equivale a 360 graus.

/* Adicionando transições */
.elemento {
    transition: all 1s;
}

/* Adicionando modificações */
.elemento:hover {
    background-color: green;
    height: 70px;
    width: 70px;
    transform: rotate(360deg);
}

Transform translate

Translate desloca o elemento no eixo X ou Y a partir de sua posição original. O valor do deslocamento pode ser dado em qualquer uma das unidades de comprimento do css.

/* Adicionando transições */
.elemento {
    transition: all 1s;
}

/* Adicionando modificações */
.elemento:hover {
    background-color: green;
    transform: translateY(30px);
}

Transform skew

Skew é capaz de inclinar, ou distorcer, um elemento ao longo dos eixos X e Y.

/* Adicionando mais transições */
.elemento {
    transition: all 1s;
}

/* Adicionando mais modificações */
.elemento:hover {
    background-color: green;
    transform: skew(0deg, 20deg);
}