CSS3 3D图书展示 (3D Book Showcase)

今天的例子，主要实现了：图书的360°翻转和图书打开的过渡效果。

这个效果，是我从一个国外网站上所看到的，由于效果逼真便又开始手痒了起来，自己制作了一个。有时候，光看代码觉得还好，但当自己从0开始制作的时候，顿时变的道路坎坷。期间遇到了很多小BUG和细节上的我问题，不过本人高要求搞标准，看到问题一定要修复的洁癖，这几天一直在不断的修改修改再修改，好在终于制作完成了（T_T）...

虽然花了大把的时间，不过总算有所收获，对CSS 3D Transforms有了一个更为详细的了解过程。平时觉得CSS 3D Transforms并没有那么复杂，想不到实际运用的时候还是会有很多未知的问题在等着你。其中，有个让我非常胸闷的问题。那就是为了偷懒，使用了prefixfree.min.js，导致页面每次加载的时候，都会触发transition-duration，导致有些效果在刷新的时候就执行了一次。我还以为是我哪写错了，寻找了好久...

HTML CODE：
现在，我们来看一下这本书的HTML结构，代码并不复杂。但由于我们做的是一本3D效果的图书，所以像书的封面、背面、书脊等部分，都要一一制作完全。

<div id="book" class="view-cover">
	<div class="main">
		<div class="book-font">
			<div class="book-cover">
				<h1 class="title">Wuthering Heights</h1>
				<h2 class="author">Emily Bronte</h2>
				<div class="publisher">Oxford University Press, USA</div>
			</div>
			<div class="book-cover-back"></div>
		</div>
		<div class="book-page">
			<div id="page-1" class="page">
				<h3>Chapter...</h3>
				<p>Article...</p>
			</div>
			<div class="page-number">- 1 -</div>
		</div>
		<div class="book-back">
			<div class="description">
				<p>"..."</p>
				<p class="txt-right">--Katherine Linehan, Oberlin College</p>
			</div>
			<div class="isbn"><img src="images/isbn.png"></div>
		</div>
		<div class="book-bone">
			<h2>Emily Bronte　Wuthering Heights</h2>
		</div>
		<div class="book-top"></div>
		<div class="book-right"></div>
		<div class="book-bottom"></div>
	</div>
</div>

CSS CODE：
接着，最最关键的部分，就是CSS。虽然我们还是有用到jquery，只是为了增加各种效果的切换。

/* = Flip
-------------------------------------------------------------- */
	/* Cover 图书封面 */
	.view-cover:hover .main{
		transform:rotate3d(0,1,0,-40deg);
	}
	/* Cover Back 图书背面 */
	.view-back .main{
		transform:rotate3d(0,1,0,180deg);
	}
	.view-back:hover .main{
		transform:rotate3d(0,1,0,140deg);
	}
	/* Open 图书打开 */
	.open-book{
		transform:translate3d(50%,0,0);
	}
	.open-book  .book-font{
		transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
	}
	.open-book:hover .main{
		transform:rotate3d(1,1,0,15deg);
	}
	/* View Rotate 图书旋转 */
	.view-rotate .main{
		transition-duration:5s;
		transform:rotate3d(0,1,0,360deg);
	}
	.view-rotate:hover .main{
		transition-duration:8s;
		transform:rotate3d(0,1,0,-360deg);
	}

提示：需要在支持CSS 3D transforms的浏览器中查看演示，推荐使用webkit内核的浏览器访问(例如：Chrome、Safari)。

疑问：公司电脑是Win7 Chrome(版本24.0.1312.52 m)测试下来一切正常，但家里电脑是Win8 Chrome(版本24.0.1312.57 m)则效果无法实现，对此表示费解...有木人知道原因？

DemoDownload

至于...为什么Demo全是用的英文，因为可以调用Google Web Fonts，从而更美观。

如果你想更深入的了解CSS 3D Transforms，推荐以下2篇文章：
1、Understanding CSS 3D Transforms
2、An Introduction to CSS 3-D Transforms