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

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

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

今天的例子中，我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。

对于preserve-3d，这里要说明的是，它只影响这个元素的子元素（二级元素），孙元素（三级元素）如果也想拥有3D模式，那么就必须给它的上级元素（父元素）也添加preserve-3d。

box-sizing是我们平时比较少接触到的属性，其分辨有2个值content-box和border-box。
content-box：此属性表现为标准模式下的盒模型（当我们设置元素的width和height时，它的宽度不包括border和padding。例：width:100px; border-width:10px; 元素实际宽度为220px;）
border-box：此属性表现为怪异模式下的盒模型（和content-box相反，它的宽度包含border和padding。例：width:100px; border-width:10px; 此时的border相当于内边距，元素实际宽度仍为200px;）

好了，接下来我们就看例子吧：
[ 查看全文... ]