今天的例子,主要实现了:图书的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