CSS3 flip effect

Patrząc na demo css3 flip effect trudno oprzeć się wrażeniu, że animacja została zrobiona w javascripcie. Nic bardziej mylnego :). Do wykonania efektu obracającej się kartki wystarczy niewiele reguł css3. Ze względu na ograniczoną obsługę reguły css3 transition najlepiej oglądać efekt w przeglądarkach z silnikiem webkit np. Google Chrome. Kod html, któremu będziemy nadawać style jest bardzo prosty. Div od id box zawierający dwa divy (pierwszą i drugą stronę obracającej się kartki).

<div id="box">
	<div>Design</div>
	<div>Concept</div>
</div>

Na początku należy dodać regułę dla body.

body {
	display: -moz-box;
	display: -webkit-box;
	display: box;
}

Następnie stylujemy element o id box. Oprócz znanych reguł takich jak kolor tła, obramowanie czy margines pojawiają się reguły transition. Zwróćmy uwagę na zastosowane prefiksy dla określonych przeglądarek (-webkit-, -moz-). Właściwość transistion pozwala na zmianę stanu elementu w sposób płynny. Jako wartość dla transition podaliśmy all 1s. Oznacza to, że przeglądarka będzie reagowała na zmianę dowolnej własności css (all) w czasie 1s.

#box {
	background: #e3e3e3;
	border: 1px solid #666;
	margin:0 auto;
	width: 300px;
	height: 200px;
	cursor: pointer;
	position: relative;/*wyeliminowanie pojawiających się dziwnie poziomych pasków przewijania*/
	-webkit-transition: all 1s;	
	-moz-transition: all 1s;
	transition: all 1s;	
}

Teraz styl dla wewnętrznych divów. Oba divy wyświetlają się jeden pod drugim, więc aby to skorygować nadajemy pozycję absolutną. Dodajemy również efekt przejścia (transition). Dodam tu tylko, że możemy ease-in-out oznacza typ animacji. Podanie typu jest opcjonalne. Jeśli go nie podamy zostanie użyty domyślny czyli linear.

#box div {
	position: absolute;
	width: 100%; 
	height: 100%;
	top: 0; 
	left: 0;
	background: #92C8E1;
	color:#1E3C5E;
	font: 48px/200px bold Arial, sans-serif;
	text-align: center;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

Aby pierwszy div był widoczny najpierw musimy dodać następujące reguły.

#box > div:first-child {
	position: relative;
	z-index: 2;
}

Teraz zaczynamy faktyczną zabawę z obrotami kartki. Dla stanu hover elementu o id box stosujemy transformację obrotu wokół osi Y o 180 stopni - transform: rotateY(180deg). Tak samo postępujemy z drugim divem (zawierającym tekst "Concept"), aby odbić lustrzanie tekst. Na koniec ustawiamy opacity: 0 dla pierwszego diva aby go ukryć.

#box:hover, #box:hover div:last-child {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);   	   	
}
#box:hover > div:first-child {
	opacity: 0;
}