Como transformar objetos com css3

Em CSS3, um transformar

muda a aparência dos objetos na tela de uma maneira específica. Por exemplo, você pode girar o objeto ou distorcer suas dimensões. Transforma tornar mais fácil para criar apresentações únicas de objetos comuns - efeitos que normalmente você precisa de um designer ou artista gráfico para criar para você. A lista a seguir descreve os tipos de transformações que podem ser executadas.

  • matriz (a, b, c, d, tx, ty): distorce o objecto utilizando uma matriz definida por pontos a, b, c, e d. Em seguida, ele traduz a posição do objeto na tela por um valor indicado por tx e ty. (Você pode tentar a matriz () transformar para fora em w3schools.com.)

    Existem versões de muitas destas funções que trabalham em objetos tridimensionais. Por exemplo, existe uma função Matrix3D (). Estas funções adicionar um z-eixo para a equação, de modo que você pode manipular objetos tridimensionais no espaço tridimensional. Você pode ler mais sobre como as versões 3D trabalhar em Mozilla Developer Network e CSS-Tricks.

  • traduzir (tx, ty), translateX (TX), translateY (ty): Modifica a posição do objecto na tela por um montante horizontal definido por tx, um montante vertical e definido por ty, ou ambos. (Você pode tentar a traduzir () transformar em w3schools.com.)

    Video: tutorial html y css | posicionamiento de divs en el contenedor general (basico)

  • escala (x, y), scaleX (x), scaleY (y): Estica o objecto horizontalmente pela quantidade especificada por x, verticalmente pela quantidade especificada por Y, ou ambos. (Você pode tentar a escala () transformar em w3schools.com.)

  • rotação (ângulo), rotateX (ângulo), rotateY (ângulo): Roda o objecto ao número de graus especificadas no eixo desejado. (Você pode tentar a rotate () transformar em w3schools.com.)

    O Internet Explorer não suportar todas as transformações. Por exemplo, você verá que o Internet Explorer 9 não suporta as funções rotateX () e rotateY ().

  • inclinação (angleX, Angley), skewX (angleX), skewY (Angley): distorce o objecto, o número de graus na horizontal especificados por angleX, o número de graus na vertical especificado por Angley, ou ambos. (Você pode tentar a inclinação () transformar em w3schools.com.)

A melhor maneira de entender essas transformações é vê-los em ação. O procedimento a seguir ajuda a criar um aplicativo de exemplo que demonstra as transformações que podem ser executadas.

Criar um novo arquivo de HTML5 com seu editor de texto.

  • Digite o seguinte código para a página HTML.

    Exemplos de Transformadas

    Matriz

    Traduzir

    Escala

    Video: Css3 animaciones | Transiciones fáciles en css3 con transition sin javascript



    Rodar

    Rodar Y

    enviesado

    O exemplo demonstra as transformações listados como parágrafos. Você pode tentar outras transformações, modificando o exemplo (a grande idéia).

  • Salve o arquivo como Transforms.HTML.

  • Criar um novo arquivo CSS com seu editor de texto.

  • Digite o seguinte informações de estilo CSS.

    #Matrix {fronteira: sólido-fronteira-cor: preto-fronteira de largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: matriz (0.866,0.5,0.4,0.866,5 , 15) - MS-transform: matriz (0.866,0.5,0.4,0.866,5,15) - webkit-transform: matriz (0.866,0.5,0.4,0.866,5,15) -} # Traduzir {border: sólido cor-de fronteira-: preto-fronteira de largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: traduzir (20 p, 30px) - MS-transform: traduzir (20 p, 30px) - -webkit-transform: traduzir (20 p, 30px) -} # Escala {fronteira: sólido-fronteira-cor: preto-fronteira de largura:-fonte de tamanho fino: 30px; margem: 50 pixels; largura: 140px; altura : 40 px; transformar: escala (1.6, 0.75) - MS-transform: escala (1.6, 0.75) - -webkit-transform: escala (1.6, 0.75) -} # Rodar {fronteira: sólido-fronteira-cor: Black- fronteira de largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: rotação (140deg) - MS-transform: rotação (140deg) - -webkit-transform: rotação (140deg) -} # RotateY {border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50p x; width: 140px; height: 40px; transform: rotateY (140deg) - ms-transform: rotateY (140deg) - webkit-transform: rotateY (140deg) -} # Skew {border: solid-border-color: Black -border-largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: inclinação (15deg, 30deg) - MS-transform: inclinação (15deg, 30deg) - -webkit-transformar : inclinação (15deg, 30deg) -}

    Cada uma dessas transformações usa exatamente o mesmo formato de parágrafo para que você possa entender melhor como eles funcionam. O uso de uma fronteira torna mais fácil de entender a transformação porque a combinação de palavras e um objeto na tela transmitir mais informações (algo para se lembrar quando você criar suas próprias aplicações de teste).

    As transformações são considerados experimentais, mesmo que eles aparecem como parte da especificação. A fim de usá-los com o Internet Explorer 9 +, você deve incluir o prefixo -ms-. Ambos Safari e Chrome requer o prefixo -webkit-. É por isso que você vê cada transformação listado três vezes. As transformadas devem também trabalhar com ambos Opera e Firefox sem qualquer problema.

  • Salve o arquivo como Transforms.CSS.

  • Carregar o exemplo transformações.

    Video: Aprende HTML5 y CSS3 desde cero - gratis

    Você vê os efeitos de transformação. Todas estas transformações são usando a mesma fonte, tamanho da fonte e tamanho da caixa, de modo que as diferenças que você vê são unicamente devido à transformação ocorrendo. Repare que a transformação rotateY () realmente mostra o texto para trás.

    Video: HTML5 y CSS3 Como hacer que una imagen u obejeto gire 360 grados [Transform]

    Tente modificar os valores transformam para ver como as alterações afetam a saída. Você ficará surpreso com o quão flexível estas funções são.

  • É possível combinar transformações para criar efeitos ainda mais incomuns. Simplesmente separe-os com um espaço. Por exemplo, para combinar uma rotate () com uma inclinação (), você deverá digitar transform: rotate (25deg) inclinação (15deg, 30deg) -.


    Publicações relacionadas