I have seem a flip page effect in the dashboard of Joomla some month before, I was surprised on such effect, it was amazing and wonderful. In the first time I considered this was made by Javascript, but no idea on how to do this. My colleage using half day to investigate but still not success to get the result.

Today, when I am daydreaming, suddenly thing about this effect and consider it with CSS3, it should be made by CSS3 transition animation. I immediately try to do this and finally I get the following result ( Please use firefox or chrome )

The css code is as following:

CSS

.css3flipbox {
	width: 150px;
	height: 100px;
	border: 1px solid #333;
	transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
}
.css3flipbox:hover {
	border-bottom-right-radius: 30% 15%;
	box-shadow: 3px 5px 5px #999;
	-moz-box-shadow: 3px 5px 5px #999;
	-webkit-box-shadow: 3px 5px 5px #999;
	-o-box-shadow: 3px 5px 5px #999;
}

HTML