GitHub - Warry/CSS-3D-flip-effect-for-iphone: 3D flip effect for iphone in pure CSS3 with animation (css transformation)

Warry / CSS-3D-flip-effect-for-iphone Public

Notifications You must be signed in to change notification settings
Fork 7
Star 12

3D flip effect for iphone in pure CSS3 with animation (css transformation)

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
README		README
flip.html		flip.html

Repository files navigation

CSS :

#flip {
	position: absolute;
	min-height: 460px;
	width: 320px;
	-webkit-perspective: 1000;
	background: #000;
}
#front, #back {
	background: #fff;
	position: absolute;
	top: 0;
	width: 100%;
	min-height: 100%;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all .5s ease-in-out;
}
#front {
	-webkit-transform: rotateY(0deg);
}
#back {
	-webkit-transform: rotateY(180deg);
}
div:target#flip #front {
	-webkit-transform: rotateY(-180deg);
}
div:target#flip #back {
	-webkit-transform: rotateY(0deg);
}

--
HTML

<div id="flip">
	<div id="front">
		FRONT
		<p><a href="#flip">Flip to back !</a></p>
	</div>
	<div id="back">
		BACK
		<p><a href="#">Flip to front !</a></p>
	</div>
</div>