CSS3 3D Transforms no IE10

IEBlog Português

Blog da equipe de engenharia do Windows Internet Explorer

CSS3 3D Transforms no IE10

  • Comments 0

Os recursos do CSS3 facilitam a criação de experiências avançadas e imersivas na Web. Uma postagem recente descreveu como desenvolvedores da Web adicionam personalidade a seus sites com o CSS3 Transitions and Animations. O CSS3 3D Transforms adiciona, literalmente, uma outra dimensão para que desenvolvedores aprimorem seus sites. Por exemplo, a página Iniciar do estilo Metro no Windows 8 usa 3D transforms sutilmente para realçar mosaicos pressionados, como visto abaixo.

O mosaico do Internet Explorer no modo não pressionado (à esquerda) e pressionado (à direita)
O mosaico do Internet Explorer 10 no modo não pressionado (à esquerda) e pressionado (à direita)

Adicionando uma terceira dimensão ao CSS Transforms

Assim como o CSS3 2D Transforms, o 3D Transforms fornece funções e valores ao CSS transform e propriedades transform-origin que aplicam operações de transformações geométricas em elementos HTML. O CSS 3D Transforms estende as funções das transforms para habilitar o 3D transforms. As funções das transforms rotate(), scale(), translate(), skew() e matrix() são expandidas para abranger os espaços 3D com um parâmetro de coordenada z - ou, no caso da função matrix3d(), 10 parâmetros extras - e reproduzindo funções de transforms adicionais, por exemplo, rotateZ() e scaleZ().

Uma nova função perspective transform acrescenta profundidade aos elementos transformados, tornando os pontos distantes aparentemente menores.

O CSS3 3D Transforms também adiciona algumas novas propriedades CSS. Além das propriedades transform e transform-origin, o IE10 dá suporte a prefixos dos fornecedores, como perspective, perspective-origin, backface-visibility e o flat valor do transform-style.

Observação: Todos os exemplos marcados nesta postagem utilizam propriedades sem prefixos, como definido no padrão W3C. No entanto, neste momento, todos os navegadores que implementam esses recursos o fazem com prefixos específicos de fornecedores. Lembre-se de adicionar o prefixo do seu navegador à marcação de exemplo quando estiver realizando testes.

Perspective

A função perspective transform é importante para o 3D transforms. Ela define a posição do visualizador e mapeia o conteúdo visualizável em uma pirâmide de exibição que, por sua vez, projeta-se em um plano de exibição 2D. Sem especificar a função perspective, todos os pontos no espaço z são mesclados em um mesmo plano 2D e não há percepção de profundidade na transform resultante. Para algumas transforms, como a conversão junto ao eixo Z mostrada abaixo, a função perspective transform é essencial para a visualização de algum efeito na transform.

Nos exemplos abaixo,  é o elemento não transformado original e  é o elemento transformado

Exemplo de transform: perspective(500px) translate(0px, 0px, -300px); Exemplo de transform: translate(0px, 0px, -300px);
transform: perspective(500px) translate(0px, 0px, -300px); transform: translate(0px, 0px, -300px);
 
transform: perspective(500px) rotateY(30deg); Exemplo de transform: rotateY(30deg);
transform: perspective(500px) rotateY(30deg); transform: rotateY(30deg);

Um atalho para adicionar a perspective transform à vários elementos é utilizar a propriedade perspective em seus elementos pai. A propriedade perspective aplica a perspective transform em cada um de seus elementos filho:

Exemplo de dois divs transformados pela mesma propriedade perspective pai.

#parent {

perspective: 500px;

}

 

#div1 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg);

}

 

#div2 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg) translate(220px);

}

A propriedade perspective-origin também pode ser usada junto com a perspective para afastar o ponto de vista do centro do elemento:

Ilustração da propriedade perspective-depth.

Logo abaixo, você verá que mudando a perspective-origin para a esquerda faz com que o conteúdo à direita da perspective-origin primária fique mais afastada.

Exemplo de dois divs transformados pela mesma propriedade perspective-depth pai.

#parent {

perspective: 500px;

perspective-origin: -300px 0px;

}

backface-visibility

A propriedade backface-visibility é útil para ocultar o conteúdo do verso. Por padrão, o verso é visível e o conteúdo transformado pode ser visto mesmo quando virado. Porém, se a backface-visibility for definida como um conteúdo hidden, o conteúdo ficará oculto se o elemento for girado até que o lado da frente não esteja mais visível. Isso pode ser útil se você quiser simular um objeto com vários lados, como o cartão usado no exemplo abaixo. Ao definir a backface-visibility como hidden, é fácil garantir que somente o lado da frente fique visível.

Marcação CSS:

.card, .card div {

position: absolute;

width: 102px;

height: 143px;

}

 

.card div:nth-child(1) {

background-image: url('redback.png');

}

 

.card div:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

Marcação HTML para um cartão:

<div class="card"><div></div><div></div></div>

Criar seis cartões como os definidos acima e atribuir a cada um a propriedade style="transform: rotateY(ndeg)" com um valor de rotação n diferente, resulta nisto:

Sequência de 6 cartões girando da frente ao verso.
rotateY(0deg);rotateY(36deg);rotateY(72deg);rotateY(108deg);rotateY(144deg);rotateY(180deg);

O que observamos nesse exemplo é que quando não há rotação, você vê a segunda div, o 8 de paus - porque é o que está no topo da pilha de cartas. Quando aplicamos uma rotação na carta e passamos dos 90 graus, a propriedade backface-visibility: hidden; da segunda div torna esse lado da carta invisível e, portanto, expõe a primeira div, o verso da carta.

3D Transforms com Animations and Transitions

E o melhor de tudo é que você também pode usar o 3D transforms junto do CSS transitions and animations. Se você estiver usando o IE10 ou outro navegador que suporte CSS3 Animations de CSS3 3D Transforms, experimente este exemplo de texto de rolagem, criado a partir da animação da propriedade transform.

Essa é a marcação CSS que produz o efeito mostrado nas capturas de tela abaixo.

#parentDiv {

perspective: 500px;

perspective-origin: 150px 500px;

}

 

#div1 {

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

}

 

@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-8300px); }

}

Quadros iniciais da demonstração que anima o texto de rolagem com o 3D transforms.Quadros mais avançados da demonstração que anima o texto de rolagem com o 3D transforms.

Experimente hoje

Experimente no IE10 do Windows Developer Preview. Executando a demonstração de ''test drive'' : o 3D Transforms pode ajudá-lo a exibir as possibilidades que o CSS 3D Transforms habilita.

Adoraríamos ver suas criações!

—Jennifer Yu, gerente de programas geral, gráficos do Internet Explorer

  • Loading...