CSS3 3D Transforms no IE10
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
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
transform: perspective(500px) translate(0px, 0px, -300px); | transform: translate(0px, 0px, -300px); | |
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:
#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:
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.
#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:
| 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); }
}
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