Site Overlay

Transformações 3D

As funções de transform em 2D são muito interessantes, mas não se comparam aos efeitos criados pelas funções de três dimensões. Capazes de usar todo o poder de renderização dos navegadores, com essas funções podemos criar efeitos similares ao de aplicações nativas do Windows ou do OS X.

Algumas das novas funções disponíveis:

  • translateZ: Assim como seus similares translateX e translateY, permite a reposição dos elementos dentro de um eixo específico;
  • rotateX, rotateY: São usadas para rotacionar os elementos nos eixos verticais e horizontais;
  • perspective: Permite manipular a perspectiva dos elementos em meio as transformações;
  • matrix3d, translate3d e rotate3d: Versões melhoradas de funções que vimos anteriormente, agora com suporte a 3D.

Além das funções novas, uma nova propriedade foi adicionada para manipular o efeito da transformação quando aplicada a elementos com outros elementos dentro dele, o transform-style. Por padrão, os elementos filhos não compartilham do efeito 3D existente no elemento que os contêm – o que leva a um comportamento inesperado do posicionamento – e podemos mudar isso utilizando o transform-style com o valor preserve-3d, aplicando os efeitos aos elementos internos do que está sendo transformado.

Apesar do suporte escasso de navegadores, existem cenários onde utilizar efeitos em 3D são uma ótima ferramenta para melhorar a interação dos seus projetos e roubar elogios pela beleza dos efeitos. Páginas voltadas para dispositivos móveis ou cuja audiência majoritária utiliza navegadores atualizados – como o Firefox e o Chrome – são ótimas pedidas. As alternativas aos efeitos para navegadores sem suporte provavelmente vão requerer mudanças maiores na sua interface para permitir o uso em casos onde não há suporte as funções de 3D.

Vamos transitar entre dois formulários utilizando animações 3D – geralmente vemos isso sendo feito com efeitos mais simples, mas o trabalho extra para chegar no que vamos criar não é tão grande quanto se pode imaginar. Vamos começar com o código para os formulários:

<section class=’signup’>

<form>

<h2>Cadastre-se agora!</h2>

<p>

<label for=”account_email”>E-mail</label>

<input type=’email’ id=”account_email”>

</p>

<p>

<label for=”account_password”>Senha</label>

<input type=’password’ id=”account_password”>

</p>

<p>

<label for=”account_password_confirmation”>

Confirme a sua senha

</label>

<input type=’password’ id=”account_password_confirmation”>

</p>

<p><button>Enviar!</button></p>

<a href=’javascript:;’ class=’toggle’>Já estou cadastrado no site</a>

</form>

</section>

E um formulário para login:

<section class=’signin’>

<form>

<h2>Entrar no site</h2>

<p>

<label for=”user_email”>E-mail</label>

<input type=’email’ id=”user_email”>

</p>

<p>

<label for=”user_password”>Senha</label>

<input type=’password’ id=”user_password”>

</p>

<p>

<button>Enviar!</button>

</p>

<a href=’javascript:;’ class=’toggle’>Quero me cadastrar</a>

</form>

</section>

Junto deles, um pouco de CSS (devidamente inspirado em exemplos anteriores) para adicionar estilo aos campos e posicionar todos os elementos:

form {

font-size: 0.8em;

padding: 10px;

}

label {

display: block;

font-weight: bold;

}

input {

border: 1px solid #CCC;

box-shadow: inset 2px 2px 2px #EEE;

font-size: 0.9em;

padding: 2px 5px;

}

Nada muito diferente do que estamos acostumados a ver no dia a dia, certo? Os links de “Quero me cadastrar” e Já estou cadastrado no site serão utilizados para transitar entre os formulários, com ajuda de JavaScript e do jQuery. Agora, vamos colocar os nossos formulários dentro de 2 elementos – pode soar que isto é desnecessário, mas eles terão um papel importante.

<div class=’container’>

<div class=’card’>

<!– As seções de ‘login’ e ‘signup’ vão aqui… –>

</div>

</div>

E claro, um pouco de CSS para esses elementos:

.container {

height: 300px;

position: relative;

width: 200px;

}

.card {

border-radius: 5px;

border: 1px solid #CCC;

height: 100%;

position: absolute;

width: 100%;

}

.card section {

background-color: #FFF;

border-radius: 5px;

position: absolute;

}

Definimos o elemento que vai conter as seções e seus formulários, e posicionados exatamente uma em cima da outra. Para poder “girar” os formulários de um lado para outro, precisamos colocar um deles de costas, certo? Então, vamos usar o rotateY!

.signup {

transform: rotateY(180deg);

}

O formulário aparece invertido no fundo, o que pode deixar a aparência do elemento estranha. Então precisamos esconder as “costas” do formulário, atualizado um dos seletores que criamos anteriormente:

.card section {

backface-visibility: hidden;

background-color: #FFF;

border-radius: 5px;

position: absolute;

}

Com a propriedade backface-visibility definida como hidden, as costas dos elementos (no nosso caso, das seções .signup e .signin) ficaram invisíveis. O que precisamos agora é mudar de um formulário para outro, utilizando um pedaço de código JavaScript, utilizando o jQuery.

jQuery(function($) {

$(‘section’).on(‘click’, ‘a’, function(e) {

$(‘.card’).toggleClass(‘flipped’);

})

});

Toda vez que algum link dentro de uma section for clicado, um dos containers que adicionados anteriormente – a div .card – irá receber a classe flipped, ou irá perder essa classe caso ela esteja presente.

.card.flipped {

transform: rotateY(180deg);

}

Assim, todo o elemento será rotacionado por inteiro – então o formulário que estava de costas ficará de frente, e o que estava na frente ficará para trás. Se você testar isso e tentar voltar para o formulário de login, verá que não conseguimos clicar nos elementos do formulário de cadastro. Isso é porquê a div .card não está no mesmo espaço das seções dos formulários. Basta corrigir isso e podemos transitar de um formulário para outro a vontade:

.card {

border-radius: 5px;

border: 1px solid #CCC;

height: 100%;

position: absolute;

transform-style: preserve-3d;

width: 100%;

}

Conseguimos agora mudar de um formulário a outro, mas não temos animação – hora de uma transição entrar em jogo, para o elemento .card. Uma transição de um segundo é o suficiente para o nosso exemplo:

.card {

border-radius: 5px;

border: 1px solid #CCC;

height: 100%;

position: absolute;

transform-style: preserve-3d;

transition: transform 1s;

width: 100%;

}

Agora estamos chegando a algo interessante, mas ainda não ajustamos um ponto importante do uso de 3D – a perspectiva. Não existe aquela ideia de profundidade e que os elementos estão girando em apenas um eixo dentro do espaço definido. Para determinar a “profundidade” das nossas páginas, precisamos utilizar a propriedade perspective. Como os elementos que estão sendo utilizados estão relativos ao nosso .container, é no CSS que devemos definir a profundidade do nosso plano.

.container {

height: 300px;

perspective: 500px;

position: relative;

width: 200px;

}

O valor de 500px é de praxe para esse cenário. É fácil notar a diferença que isso fez para o efeito que criamos – conseguimos notar os formulários girando na ilusão de profundidade que criamos via CSS. Se quiser mudar o sentido da animação, basta trocar o uso do rotateY por rotateX, e os formulários irão girar na horizontal.

5

Source: scriptcase / Transformações 3D

Comments

comments

Leave a Reply

Your email address will not be published.