Nesse artigo falaremos sobre transformações 3D, que são apenas um dos recursos mais refinados das CSS3, mesmo que ainda haja muito que evoluir. Estaremos falando sobre os principais princípios sobre formações 3D, como utilizar, quando utilizar e alguns exemplos básicos.
Porém não podemos nos animar muito com essa ferramenta, podemos até estar a fim de sairmos colocando efeitos por nossas aplicações web, mas devemos compreender que as CSS foram feitas para melhorar os documentos. Devemos utilizar com moderação, usando apenas para que a experiência dos usuários nos diversos dispositivos seja agradável e não para enfeitarmos o nosso website como se fosse carnaval. Não podemos cometer os mesmos erros que aqueles sites cheios de animações, pois se enchermos nosso site com efeitos, a cada passar de mouse, a cada clique, isso pode se tornar perda de tempo para os usuários.
Perspectiva
Para podemos falar de 3D precisamos também falar de perspectiva, pois não conseguiremos fazer uma figura 3D sem ter o mínimo de noção de perspectiva. Existem duas maneiras de “adicionarmos” perspectiva, uma seria utilizando diretamente a propriedade “Perspective“ ou adicionando um valor perspective() na propriedade Transform. Mais adiante serão mostradas as duas formas.
Advertências
- O desempenho pode não ser o mesmo, dependendo do navegador. Aqueles que apresentaram melhor desempenho foram o Chrome e o Safari, enquanto o Firefox está a lançar atualizações para que possa se adequar rapidamente.
- Dependendo do navegador poderemos notar algumas mudanças de pixels entre um elemento começar ou terminar uma animação 3D.
- Fontes antialiasing podem aparecer e fazer mudança em relação a um elemento 3D na tela, mas este não é um problema de desenvolvimento e sim um problema do navegador. Em alguns navegadores podemos resolver isso definindo webkit-font-smothing: antialiased no CSS.
- Se por acaso um navegador não suportar esse recurso ou for mais antigo, simplesmente ele ignorara as transformações 3D (sem erros serem gerados).
- Em algumas versões do Firefox, os elementos boxShadow e o 3D nem sempre são processados corretamente, novamente isso é um erro de navegador. Não possuímos uma alternativa de correção, resta esperarmos que a equipe do Firefox consiga corrigir isso em uma nova versão que possa vir.
- IE 10 até suporta transformações 3D, mas não dá apoio para transformstyle de “preserva-3D”.
Como começar
Para começarmos precisamos entender como a transformação 3D acontece. Criar um objeto 3D é simples, tudo que necessitamos fazer é decidir um estilo para nossa transformação 3D e criar uma perspectiva. Assim podemos começar a mover as formas no nosso espaço 3D. Para relembrar, quando utilizamos uma propriedade 3D, temos que definir todos os prefixos de todos os elementos. Para entendermos melhor isso vamos partir para a prática e criar um cubo simples como exemplo.
Vamos começar a criar nossa folha de estilo para nosso cubo.
Listagem 1: Folha de estilo CSS
.cube {
position: absolute;
left: 50%;
top: 300px;
margin-left: -200px;
}
.cube p {
line-height: 14px;
font-size: 12px;
color:white;
}
.cube h2 {
font-weight: bold;
color: white;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
-o-transform: skew(0deg, 30deg);
-ms-transform: skew(0deg, 30deg);
transform: skew(0deg, 30deg);
background-color: blue;
}
.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
background-color: yellow;
left: 200px;
}
.topFace div {
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
-o-transform: skew(0deg, -30deg) scale(1, 1.16);
-ms-transform: skew(0deg, -30deg) scale(1, 1.16);
transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: red;
font-size: 0.862em;
}
.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
top: -158px;
left: 100px;
}
Agora com nossa folha de estilos criada basta criar o nosso HTML. E assim teremos um cubo apresentando três partes: topo, lado esquerdo e lado direito.
Listagem 2: Parte HTML do cubo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../experiment-styles.css" />
<link rel="stylesheet" href="css/experiment.css" />
</head>
<body class="experiment">
<div class="wrapper">
<p class="learn">
This is a demo, <a href="http://www.paulrhayes.com/2009-04/3d-cube-using-css-transformations/">learn how it works</a>.
</p>
<div id="experiment">
<div class="cube">
<div class="topFace"><div>
<h2>Parte de cima do cubo</h2>
<p>A parte de cima está dentro de uma tag div extra para poder da à rotação correta do retângulo distorcida.</p>.
<p>Esse lado do cubo também é dimensionado, de modo que o tamanho da fonte foi reduzido para acomodar.</p>.
</div></div>
<div class="leftFace">
<h2> Lado esquerdo do cubo</h2>
<p>Nesse artigo falaremos sobre transformações 3D são apenas uma das funções mais refinadas do CSS3, ainda haja muito que evoluir. </p>
</div>
<div class="rightFace">
<h2>Lado direito do cubo</h2>
<p>O IE 10 até suporta transformações 3D, mais não da apoio para transformstyle de “preserva-3D”.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Como resultado, temos o cubo pronto.
Figura 1: Resultado exemplo cubo 3D
Conclusão
Como podemos ver, criar elementos 3D não é uma coisa tão complexa assim, basta apenas um pouco de criatividade e as coisas começam a fluir naturalmente. Podemos nos sentir mais à vontade para utilizar esse recurso das CSS3 sabendo que a maioria dos browsers suportam normalmente esses efeitos.
Grato pela atenção de todos, espero que o tema tenha sido de agrado de todos os leitores. Sintam-se à vontade para darem sua opinião sobre o tema e sugerirem novos temas.
Fico por aqui com mais este artigo um abraço a todos e até a próxima publicação.
