1.什么是3D形变：
3D形变，即我们可以从三个维度来观察、改变盒子的形状，位置等。
2.3D形变与2D形变的区别：
增加了Z轴这一维度。我们在写盒子的时候，可以将transform的四个属性分别添加上Z轴上的变化。写的时候我们一般考虑要有三层嵌套，第一层———景深层，通常我们会给其一个属性perspective，属性值为多少像素。这就假设了我们眼睛所看到的立体图形与我们的距离为mpx;同时，为了产生立体效果，我们给第二层——容器一个属性transform-style,属性值为preserve-3d;第三层，也就是我们要展示在页面上的内容。根据transform的属性及相关定义，我们可以在三个维度上对内容进行操作。注意：我们也可以用两层嵌套的方式，即省略了上述的第一层，但是为了达到我们想要的效果，此时我们应该给将perspective：mpx;写给body的css样式。
3.说明：3D形变考查我们的空间想象能力，我们可以在transform属性里面将translate、rotate、scale搭配使用，完成3D效果。
4.3D形变的主要框架格式：
<body>
<div class="wrap">
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
备注：第一层，也就是.wrap，我们称之为景深层，就是舞台层，方便我们在此之 上展示3D效果。我们也可以去掉这一层，给body设置样式来代替他。
第二层，.box,3D容器层，用来包裹我们要展示的元素
第三层，.item,就是我们要展示的内容。
对于这固定的三层的样式设置如下：
.wrap{
/*景深层，即Z轴的深度*/
perspective: 1600px;
}
.box{
/*让容器变为3d的容器*/
transform-style: preserve-3d;
..........
}
.item{
width: 200px;
height: 200px;
background: red;
.......
}
需要注意的是，第一第二两层的第一句样式设置一定不能省略。
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
