CSS: Position e Transform

CSS: Position e Transform

  21 de junho de 2018    henrique

---

Position

     Para tirar algum elemento do fluxo da página, utiliza-se o float ou position (absolute ou fixed). O position sempre será relativo à algum outro elemento acima dele que tenha o position configurado, caso nenhum tenha essa configuração será tomada como base a página. Para adicionar um position a um elemento sem alterar a posição, apenas para servir como base a outro é só utilizar a opção relative.

Transform

    O transform serve para alterar formas ou elementos, isso é bastante usado por exemplo para colocar textos flutuantes na página, textos rotacionados, caixas com formas diferenciadas e até objetos 3D.

Algumas opções para se utilizar com transform:

rotate(10deg)                  - serve para rotacionar o elemento.

scale(1.2)                         - serve para redimensionar o elemento 

skew(10deg)                   - serve para entortar (cisalhamento)

translate(10px, 20px)     - serve para alterar a posição

     Podemos utilizar quantas transformações forem necessárias, mas quando fazemos isso temos que prestar atenção na ordem entre elas, pois o navegador as aplica da direita para a esquerda.

transform : translate(10px, 20px) scale(1.2)

Primeiro vai alterar o tamanho e depois transladar a posição.

    Para aplicar transformações em elementos inline (texto por exemplo), devemos transformar eles em blocos, para isso podemos utilizar:

display: inline-block;

    Quando vamos utilizar a transformação de rotação o navegador tem por padrão tomar como base o centro do elemento, mas quando necessário podemos alterar essa definição para isso é só utilizar a opção de alterar a origem da transformação.

transform-origin: 0 0;

Este exemplo altera a base para o canto superior esquerdo.