Transform

    Transform Examples inside classes

    transform-origin:
    • Exemplo: ao criar uma animação com rotateZ, pode-se escolher de onde essa rotação irá começar. Ou seja, no caso de girar uma div, o ponto de rotação será o indicado pela transform-origin.
    • Ninja Pop-up example: Link


    Transform: property;

    Sintaxe:
    transform: propertyName;
    transform: propertyName propertyName propertyName;

    Transition()
    • Sintaxe: transitionX(deg), transitionY(degdeg) ou transition(x, y).

    Scale()
    • Sintaxe: scaleX(deg), scaleY(deg) ou scale(x, y).
    • Utilizado para aumentar ou diminuir o tamanho de um elemento em vezes. ScaleX(2) = tamanhoElemento x2.

    Rotate()
    • Sintaxe: rotateX(deg), rotateY(deg), rotate(X, Y), rotateZ(deg).
    • RotateX() roda no eixo X.
    • RotateY() roda no eixo Y.
    • RotateZ() roda no eixo Z, in an out of the page.
    • O rotateZ(), pode ser utilizado para rotacionar uma imagem, visto ele rodar na tela e não em 3D.
    • Utilizar com degrees, por exemplo, rotateZ(90deg).

    Scale()
    • Sintaxe: scaleX(deg), scaleY(deg) ou scale(x, y).
    • Utilizado para aumentar ou diminuir o tamanho de um elemento em vezes. ScaleX(2) = tamanhoElemento x2.

    Skew()
    • Sintaxe: skewY(deg) skewX(deg)
    • SkewY() tomba o texto, como uma gangorra. Parte esquerda para cima, parte direita para baixo.

      • Exciting tours for adventurous people

    • SkewX()

      • Exciting tours for adventurous people


    Transform-origin
    • Sintaxe: transform-origin: left or right.
    • Utilizada para a animação rodar a partir de certo ponto.
    • No caso de não adicionar essa propriedade, a transição se dará inicio no centro.