Como criar designs 3D com a propriedade de transformação CSS3

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á muita referência ao eixo z. É fácil pensar nisso como a distância de medição de algo em direção ou longe 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 para a 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 scale recebe um valor para um ângulo e a perspectiva também assume um valor único.

Traduzir

traduzirZ()

Isso define uma tradução 3D usando apenas o valor do eixo z. Você pode se lembrar de traduzir x e y da tradução 2D. A ideia é a mesma com translateX() , translateY() e translateZ() porque cada um tem 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 ela 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á.

A propriedade perspectiva foi adicionada a este exemplo.

Girar

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

girarX()

Os valores de pixel não funcionarão aqui, eles precisam estar em graus. O método rotateX() gira um elemento em torno de seu eixo x em um determinado grau. Veja 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);

girarY()

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);

girarZ()

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

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

girar3d()

A função rotate3d(1, -1, 1, 45deg) gira a imagem ao longo do eixo y no â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 poderia ser adicionado às propriedades acima também.

Como usar transições e transformações CSS3 para criar animações

Animações interessantes podem ser criadas com CSS3 usando transformações e transições. As transformações são usadas para fazer um elemento mudar de um estado para outro. Exemplos seriam girar, mover, inclinar...

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 perspective ficaria assim: perspective: 600px; .

Os exemplos a seguir irão alterá-lo entre os dois, portanto, certifique-se de observar atentamente 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, pois é relevante para a perspectiva CSS. Por padrão, o ponto de fuga para um espaço 3D é posicionado no centro. Use a propriedade perspective-origin para alterar a posição do ponto de fuga. Seria algo como: perspective-origin: 15% 55% .

O exemplo à esquerda foi definido para cerca de 800px. A perspectiva do lado direito é muito mais drástica, foi definida para 200px.

Escala

escalaZ()

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

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

O exemplo da esquerda tem valor 2 e o exemplo da direita tem valor 8.

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 totalmente, 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 nota rápida: Se todas as três coordenadas do vetor forem iguais, a escala é uniforme e não haverá diferença perceptível.

transform: scale3d(1, 1, 1); /* unchanged */

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

Matriz3d()

A matriz 2D pode ter 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 esse conceito, eu recomendo este experimento interativo matrix3d ​​no Codepen.

Aqui está o esboço básico para a matriz3d: 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 criação de animações interativas é o próximo passo. 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 alteração, dando-lhe uma aparência mais suave.

Como criar um flip 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 mais baixo, 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 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 “giro” é exatamente o que parece, que é um círculo completo.

Eu também usei alguns easing para fazer uma maneira personalizada de girar. Isso é feito com transition: all 1s ease-in; .

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

Como criar texto com efeito 3D

Este exemplo foi inspirado em um pôster de filme antigo. Existem tantos tipos de letra diferentes por aí que podem utilizar um ótimo estilo CSS, então efeitos de tipo únicos 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.

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