Your Search Results

    Usando CSS transforms

    Mudando coordenadas no espaço da tela o CSS transforms permite que a posição do conteúdo afetado seja alterada sem afetar o fluxo de informação da página. Elas são implementadas usando um conjunto de propriedades CSS que permitem alterações lineares em elementos HTML. Essas alterações incluem rotação, inclinações, alteração da escala e tradução tanto em 2D quanto em 3D.

    Propriedades de CSS transforms

    Duas propriedades principais são usadas para definir o CSS transforms: transform and transform-origin

    transform-origin
    Define a posição de origem do elemento. Por padrão esta posição é o canto superior esquerdo do elemento e pode ser movido. É utilizado para muitas alterações, como rotação, alteração de escala e inclinação, que precisam de um ponto especifico como parãmentro.
    transform
    Define qual alteração será feita no elemento. Pode-se usar mais de um efeito separado-os por um espaço. Tais efeitos serão aplicados um após o outro, na ordem determinada no código.

    Exemplo: Rotação

    Este exemplo cria um ifram que permite que a página inicial do Google seja utilizada com uma rotação de 90 graus a partir do canto inferior esquerdo

    Veja um exemplo funcionando
    Veja uma foto do exemplo

    <div style="transform: rotate(90deg); transform-origin: bottom left;">
      <iframe src="http://www.google.com/" width="500" height="600"></iframe>
    </div>
    

    Example: Inclinando e Movendo

    Este exemplo cria um iframe que permite que você use a página inicial do Google inclinada em 10 graus no eixo X.

    Veja um exemplo funcionando
    View uma foto do exemplo

    <div style="transform: skewx(10deg) translatex(150px);
                transform-origin: bottom left;">
      <iframe src="http://www.google.com/" width="600" height="500"></iframe>
    </div>
    

    Propriedades especificas 3D do CSS

    Trabalhar com propriedades CSS em 3D é um pouco mais difícil. Você tem que começar configurando o espaço 3D dando perspectiva a ele, então você tem que configurar como os elementos 2D irão se comportar no espaço.

    Configurando uma perspectiva

    O primeiro elemento a ser configurado é a perspectiva. É ela a responsável pela sensação de 3D. Quanto mais longe o objeto estiver do usuário, menor ele é.

    Quanto será a sensação de encolhimento é definida pela propriedade perspective. Quanto menor o valor, mais profundidade terá o objeto.

    perspective:0; perspective:150px; perspective:300px; perspective:600px;
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6

    O segundo elemento a ser configurado é a posição de visão, que será definida pela propriedade perspective-origin. Por padrão a perspectiva é centralizada, o que nem sempre é o ideal.

    perspective-origin:150px 150px; perspective-origin:50% 50%; perspective-origin:-50px -50px;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6

    Feito isso, você pode trabalhar com elementos 3D.

    Elementos 2D em espaço 3D

    Veja também

    Anexos

    Arquivo Tamanho Data Anexado por
    google-rotated.png
    70044 bytes 2008-10-07 21:03:25 Sheppy
    rotated-google-sample.html
    259 bytes 2011-12-14 14:07:32 teoli
    skewed-google.png
    75500 bytes 2008-10-07 21:20:55 Sheppy
    skewed-google-sample.html
    325 bytes 2008-10-07 21:20:50 Sheppy
    nsAString-graph.png
    31201 bytes 2009-12-13 19:15:28 EndersTruth
    add_code.js
    3642 bytes 2009-12-17 08:23:35 Sevenspade
    Manage Search Engines....png
    31587 bytes 2009-12-18 06:12:16 sethb@mozilla.com
    Add %S.png
    35478 bytes 2009-12-18 06:14:13 sethb@mozilla.com

    Document Tags and Contributors

    Contributors to this page: francineemilia
    Última atualização por: francineemilia,