Como criar designs 3D com a propriedade CSS3 Transform

Existem duas dimensões quando se trata da propriedade de transformação CSS3, 2D e 3D. Ao animar, as transformações são usadas para fazer um elemento mudar de um estado para outro. Este tutorial serve como uma expansão deste guia sobre animações 2D. Vou fornecer algumas dicas sobre design 3D e como você pode criar animações incríveis combinando esses conceitos básicos.

As transformações 3D podem ser bastante detalhadas e podem se tornar complexas se houver muitas peças diferentes combinadas, portanto, começar com os blocos de construção básicos é útil. Alguns desses conceitos parecerão familiares, mas o “z” é algo que parecerá novo ao trabalhar em 3D. As transformações 3D estendem as transformações CSS 2D para incluir o eixo z, permitindo transformações 3D de elementos DOM.

O que é o eixo Z?

Haverá muitas referências ao eixo z. É fácil pensar nisso como a distância de medição de algo próximo ou distante de você. Se for um valor positivo, está mais perto de você. Se for um valor negativo, está mais longe de você.

Exemplos de transformação 3D

As propriedades básicas da transformação 3D são translate3d , scale3d , rotateX , rotateY , rotateZ , perspective e matrix3d ​​. Mais argumentos são incluídos com translate3d , scale3d e matrix3d ​​porque eles aceitam argumentos para x, y e z. A propriedade de escala assume um valor para um ângulo e a perspectiva também assume um único valor.

Traduzir

traduzirZ()

Isso define uma translação 3D usando apenas o valor do eixo z. Você deve se lembrar de traduzir x e y de tradução 2D. A ideia é a mesma com translateX() , translateY() e translateZ() porque cada um recebe um valor de comprimento que move o elemento pela distância especificada ao longo do eixo correto.

Neste exemplo, translateZ(-20px) moveria o elemento 20 pixels para longe do visualizador.

Aqui está o trecho de código para criar este exemplo:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

traduzir3d()

A função translate3d() é usada para mover a posição do elemento em um espaço 3D. Essa transformação é criada especificando coordenadas que definem o quanto ele se move em cada direção.

A função transform: translate3d(20px, -15px, 70px); move a imagem 20 pixels ao longo do eixo x positivo, 15 pixels no eixo y negativo e, em seguida, 70 pixels ao longo do eixo z positivo.

Aqui está um exemplo de translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

É bastante aparente que há alguma sobreposição do segundo quadrado acontecendo. Pode não parecer tão dramático quanto o esperado, mas adicionar a propriedade de perspectiva (mais adiante neste tutorial) ajudará.

Girar

A função rotate3d() gira o elemento no espaço 3D pelo ângulo especificado ao redor do eixo. Isso pode ser escrito como rotate(x, y, z, angle) .

rotacionarX()

Os valores de pixel não funcionarão aqui, precisam estar em graus. O método rotateX() gira um elemento em torno de seu eixo x em um determinado grau. Vê como o retângulo é mais curto? Ele está sendo girado ao longo do eixo x. Este exemplo mostra a rotação em 55 graus.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

rotacionarY()

O método rotateY() gira um elemento em torno de seu eixo y. Observe como o retângulo inferior não é tão largo quanto o superior? Ele é girado para não parecer tão largo quanto o retângulo acima porque está sendo girado em 60 graus.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

rotacionarZ()

O método rotateZ() gira um elemento em torno de seu eixo z em um grau especificado. Neste caso, o valor é de 120 graus.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

rotacionar3d()

A função rotate3d(1, -1, 1, 45deg) gira a imagem ao longo do eixo y em um ângulo de 45 graus. É importante observar que você pode usar valores negativos para girar o elemento na direção oposta.

Como isso é mais complexo do que as especificações de eixo único, rotate3d pode ser dividido assim: rotate3d(x,y,z,angle) onde x=1, y=-1, z=1 e o ângulo de rotação = 45 graus .

O código para estilizar isso se parece com:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Testando o básico

No sentido horário ao longo do eixo x em 45 graus.

 transform: rotate3d(1, 0, 0, 45deg);

No sentido horário ao longo do eixo y em 45 graus.

 transform: rotate3d(0, 1, 0, 45deg);

No sentido horário ao longo do eixo z em 45 graus.

 transform: rotate3d(0, 0, 1, 45deg);

Vale ressaltar que dependendo dos valores especificados, algumas vezes uma rotação não será perceptível; por exemplo, isso não seria perceptível: transform: rotate3d(0, 0, 0, 50deg);

Perspectiva

Esta é provavelmente a transformação mais “dimensional”. É aqui que você literalmente ganha perspectiva. Se você aplicar transformações 3D a um elemento sem definir a perspectiva, o efeito resultante não aparecerá como tridimensional. Isso é algo que também pode ser adicionado às propriedades acima.

Para ativar o espaço 3D, um elemento precisa de perspectiva. Isso pode ser aplicado de duas maneiras: usando a propriedade transform ou a propriedade perspective .

A propriedade transform ficaria assim: transform: perspective(600px); e a propriedade de perspectiva ficaria assim: perspective: 600px; .

Os exemplos a seguir irão alterá-lo entre os dois, então certifique-se de olhar atentamente para o código.

O valor da perspective determina a intensidade do efeito 3D. Pense em um valor baixo como sendo realmente perceptível, como a sensação quando você está olhando para um objeto grande. Quando há um valor maior, o efeito é menos intenso.

A posição do ponto de fuga também pode ser personalizada. Vale a pena mencionar, e muita experimentação, já que é relevante para a perspectiva do CSS. Por padrão, o ponto de fuga para um espaço 3D é posicionado no centro. Use a propriedade de origem da perspectiva para alterar a posição do ponto de fuga. Seria algo como: perspective-origin: 15% 55% .

Escala

escalaZ()

Isso define uma transformação de escala 3D, fornecendo um valor para o eixo z. Como ele escala apenas ao longo do eixo z, outras funções são necessárias para demonstrar o efeito de escala. Veja como o retângulo está voltado para o observador e como ele realmente mostra a perspectiva?

Para entender completamente scale(Z), brinque com o valor e você verá a perspectiva ficar “mais nítida” com os valores maiores.

escala3d(x,y,z)

A função scale3d() altera o tamanho de um elemento e é escrita como scale(x, y, z) . Como scaleZ , não é aparente como a perspectiva se parece, a menos que seja usada com perspective .

Este exemplo usa isso:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Uma observação rápida: se todas as três coordenadas do vetor forem iguais, a escala será uniforme e não haverá diferença perceptível.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Matrix3d()

A matriz 2D pode assumir seis valores, enquanto a matriz 3D leva 16 (uma matriz 4 × 4)! Seria um post muito longo se todos os detalhes fossem cobertos, então se você quiser explorar mais este conceito, eu recomendo este experimento interativo matrix3d ​​no Codepen.

Aqui está o esboço básico para matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

Como criar
Animações com Transformações 3D

Agora que o básico está coberto, a próxima etapa é criar animações interativas. Usando transformações e transições CSS3, os elementos mudam de um estado para outro girando, dimensionando ou adicionando perspectiva.

Se você é novo em animações CSS, é importante saber que, sem uma transição, um elemento sendo transformado mudaria abruptamente de um estado para outro. Para evitar isso, uma transição pode ser adicionada para que você possa controlar a mudança, dando uma aparência mais suave.

Como criar uma virada de cartão

Quem não gosta de jogar cartas? Este exemplo apresenta um cartão de dupla face e você pode ver os dois lados virando-o com uma transformação. Se você der uma olhada na tag body , muito do efeito vem da propriedade perspective . Está definido para ser 500px. Um valor menor como 100px parece muito “distorcido”.

Aqui está o HTML inicial:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

O CSS é o que faz isso acontecer:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Isso pode ser encontrado no Codepen.

Se você é novo em transformações, isso pode parecer interessante para você: transform: rotate(1turn); Esta unidade é perfeita para o nosso cartão porque uma unidade de “virar” é exatamente o que parece, que é um círculo completo.

Também usei um pouco de easing para criar uma maneira personalizada de girar. Isso é conseguido com transition: all 1s ease-in; .

Outra propriedade 3D no fragmento é transform-style: preserve-3d; . Ao incluir isso, permite que o elemento “oscile” no espaço tridimensional, em vez de permanecer com o elemento pai.

Como criar texto com efeito 3D

Este exemplo foi inspirado em um pôster de um filme antigo. Existem tantos tipos de letra diferentes por aí que podem utilizar um ótimo estilo CSS, portanto, efeitos de tipo exclusivos são definitivamente possíveis. Este texto está usando rotate3d e transform3d para dar a ele uma transformação única.

O HTML é bem simples:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

Aqui está o CSS básico:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

CSS e exemplos mais detalhados podem ser encontrados no Codepen.

Esperamos que as transformações CSS 3D tragam uma nova dimensão aos seus projetos. Utilizar a perspectiva é uma ótima maneira de tornar os elementos mais dimensionais. Combinado com transições, há muitas possibilidades na hora de criar animações.