http://bradsknutson.com/blog/css3-flash-card-demo/ Hacer una corona es mucho más... -

24.02.2015

http://bradsknutson.com/blog/css3-flash-card-demo/

Hacer una corona es mucho más fácil
que hallar una cabeza digna de llevarla.
Johann Wolfgang von Goethe

HTML

<div class="flip-card"> <div class="flip-front"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.bellaterreno.com/graphics/clipart_mystical/crowntiny/crowntiny_spin_shadow_ani.gif" alt="" />Texto, imagen</div><div class="flip-back"></div></div>

CSS

.flip-card {
	height: <-- height of flash card -->;
	width: <-- width of flash card -->;
	transform: perspective(400px) rotateY(0deg);
	-moz-transform: perspective(400px) rotateY(0deg);
	-webkit-transform: perspective(400px) rotateY(0deg);
	-o-transform: perspective(400px) rotateY(0deg);
	-ms-transform: perspective(400px) rotateY(0deg);
	transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	-webkit-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	-ms-transition: all ease 0.2s;
}
.flip-card .flip-front {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.flip-card .flip-back {
	height: 100%;
	width: 100%;
}
.flip-card:hover {
	transform: perspective(400px) rotateY(180deg);
	-moz-transform: perspective(400px) rotateY(180deg);
	-webkit-transform: perspective(400px) rotateY(180deg);
	-o-transform: perspective(400px) rotateY(180deg);
	-ms-transform: perspective(400px) rotateY(180deg);
}
.flip-card:hover .flip-back {
	transform: perspective(400px) rotateY(-180deg);
	-moz-transform: perspective(400px) rotateY(-180deg);
	-webkit-transform: perspective(400px) rotateY(-180deg);
	-o-transform: perspective(400px) rotateY(-180deg);
	-ms-transform: perspective(400px) rotateY(-180deg);
}
-->
-->