今天的例子中，我主要想讲的是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;） 好了，接下来我们就看例子吧： HTML CODE: CSS CODE: 测试环境：Chrome、Safari、Firefox（FF流畅度不是很好） DemoDownload