Utilize efeitos de flip do iPhone e iPad com WebKit

{lang: 'pt-BR'}

Recentemente comecei um trabalho para iPad. Apesar do projeto não ser nem uma aplicação web, nem uma aplicação nativa, a ferramenta me permitia que eu usasse recursos de HTML 5, especialmente os suportados pelo WebKit. O desafio foi usar alguns efeitos que são encontrados facilmente no iPhone, mas que ainda são raridades na Web.

Inicialmente esbarrei com o framework JQTouch – uma excelente solução para criar aplicações web para dispositivos móveis. Bem maduro e com muitas funcionalidades. A idéia básica do framework é transformar uma página HTML com marcações simples, em uma aplicação no estilo iPhone, incluindo design e efeitos. Para o meu problema seria um overkill e ainda teria um trabalho enorme para customizar a interface.

Me baseei, então, neste excelente artigo, que possui um exemplo bem bacana. A diferença básica do exemplo que usarei será o uso de javascript para disparar o efeito 3D. A implementação que usarei só funciona no Safari. Apesar do navegador Chrome também se basear no mesmo engine que o Safari (WebKit), infelizmente o efeito 3D não funciona corretamente.

Enquanto o W3C ainda não bate o martelo para o padrão de efeitos 3D, o projeto WebKit se adiantou e criou alguns excelentes efeitos que são aplicados por meio de CSS. A estrela da festa é o efeito '-webkit-transform'. Com ele é possível fazer rotações nos eixos X e Y (rotate), mover (translate), redimensionar (scale) ou mesmo mudar a perspectiva de um objeto (skew). Você pode se aprofundar mais nos efeitos 3D disponíveis a partir deste artigo que possui alguns exemplos bem sofisticados.

Para fazer nosso efeito de flip iremos utilizar o recurso de rotação. Para que o efeito 3D seja notado, precisamos definir a perspectiva que iremos trabalhar, o tempo de duração da transição e uma flag que habilita o efeito 3D. O efeito de flip a alguns quadrados apresentados na página. Ao serem clicados, o quadrado irá virar e para revelar o conteúdo da parte posterior.

O HTML será definido assim:

<body>
	<div id="content">
    	<div id="box1" class="box">
	    	<div class="face front"></div>
    	    <div class="face back"></div>
        </div>
        <div id="box2" class="box">
	    	<div class="face front"></div>
    	    <div class="face back"></div>
        </div>
    </div>
</body>

Criamos um container global "content", apenas para organização. Cada quadrado será definido pela div com CSS "box" que contém o conteúdo da face frontal ("face front") e da face posterior ("face back"). Para que não haja desajuste na hora do efeito, ambas as faces serão definidas com o mesmo tamanho.

O código CSS irá definir tamanhos, posicionamento e toda a configuração dos efeitos de transição:

<style>
	#content{
		-webkit-perspective: 1000;
		padding:20px;
	}

	.box{
		width:200px; height:200px;
		/*  Efeito 3D habilitado */
		-webkit-transform-style: preserve-3d;
		/* Tempo de duração da transição */
		-webkit-transition: 0.8s;
		position:absolute;
	}

	.face {
		width:200px;
		height:200px;
		-webkit-border-radius:15px;
		-webkit-box-shadow: 5px 5px 5px #888;
		position:absolute;
		-webkit-backface-visibility: hidden;
	}
	.face.front{
		background:#eeeeee;
		border:1px solid #CCC;
	}
	.face.back{
		border:1px solid #999;
		/* Face posterior é inicializada já rotacionada */
		-webkit-transform: rotateY(180deg);
		background:#F60;
	}

	.box.rotate {
		/* Efeito de rotação que será aplicado */
		-webkit-transform: rotateY(180deg);
	}

	#box1{ top:80px;  left:100px; }
	#box2{ top:200px; left:400px; }
</style>

O container mais externo "content" possui uma perspectiva de visualização, para que o efeito 3D seja percebido. A face posterior (marcada pela classe CSS "back") é inicializada com uma rotação de 180º, para que seja considerada efetivamente como a parte de trás do quadrado. As faces são definidas com posicionamento absoluto, permitindo que uma esteja sobreposta a outra.

A única coisa que falta é criar o javascript que irá aplicar o efeito de rotação quando o usuário clicar sobre um quadrado:

<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script>
        // Quando a página carregar
	$(function(){
		$("#content .box").click(function(el){
			$(this).toggleClass("rotate");
		});
	});
</script>

Quando a página carregar, todos elementos marcados com a classe CSS "box" terão seu evento de click monitorados. Ao serem disparados, a classe CSS "rotate" será aplicada, provocando o efeito de rotação do quadrado. Estamos usando o jquery para simplificar a manipulação dos elementos da página.

Experimente este um demo deste exemplo (lembre-se de usar o Safari).

Espero que a dica a tenha ajudado e vamos torcer para que estes efeitos estejam disponíveis em todos os browsers em breve.

{lang: 'pt-BR'}