之前在Joomla! 看過 Dashboard 的 Box Mouseover 時有揭頁效果, 感到甚為神奇, 最初以為是用 js 做出的效果, 同事還用了半天時間去研究, 最後都沒研究成功, 我在腦海中也想不出方法來...

今天發白日夢時突然靈機一動, 想到了前一陣子學會的 CSS3 Transition Animation, 用 CSS3 不就可以做到！！坐言起行, 於是馬上便來實作, 果然成功做到了想要的效果 ( 請用firefox或chrome )

代碼如下:

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