Como transformar objetos com CSS3

Em CSS3, uma 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): inclina 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 de 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.)

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

  • rotate (angle), rotateX (ângulo), rotateY (ângulo): Gira o objeto pelo número de graus especificados 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ê vai descobrir que o Internet Explorer 9 não suporta as funções rotateX () e rotateY ().

  • inclinação (angleX, Angley), skewX (angleX), skewY (Angley): inclina o objeto pelo número de graus na horizontal especificados pelo angleX, o número de graus na vertical especificado pelo 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.

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

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

    Exemplos de transformações
    Matriz
    Traduzir
    Escala
    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).

  3. Salve o arquivo como Transforms.HTML.

  4. Criar um novo arquivo CSS com o seu editor de texto.

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

    #Matrix {Border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; transform: 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: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; transform: translate (20px, 30px) - MS-transform: translate (20px, 30px) - webkit-transform: translate (20px, 30px) -} # Scale {border: solid-border-color: Black-border-width:-font-size fina: 30px; margin: 50px; width: 140px; altura : 40px; transformação: escala (1,6, 0,75) - ms-transform: escala (1,6, 0,75) - webkit-transform: escala (1,6, 0,75) -} # Girar {border: solid-border-color: Black- border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; transform: rotate (140deg) - ms-transform: rotate (140deg) - webkit-transform: rotate (140deg) -} # RotateY {border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; transform: rotateY (140deg) - MS-transform : rotateY (140deg) - webkit-transform: rotateY (140deg) -} # Skew {border: solid-border-color: Black-border-width:-font-size fina: 30px; margin: 50px; width: 140px; height: 40px; transform: inclinação (15deg, 30deg) - ms-transform: inclinação (15deg, 30deg) - webkit-transform: 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-. Tanto o Safari e Chrome requer o prefixo -webkit-. É por isso que você vê cada transformação listado três vezes. As transformações também devem trabalhar com ambos Opera e Firefox, sem qualquer problema.

  6. Salve o arquivo como Transforms.CSS.

  7. Carregar o exemplo transformações.

    Você vê os efeitos de transformação. Todas estas transformações estão usando o mesmo tipo de letra, 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 (), na verdade, mostra o texto para trás.

    image0.jpg

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

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

Semelhante

menu