Osheep

时光不回头,当下最重要。

3D形变

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效果。

点赞