CSS-3D转换+ perspective+transform-style

perspective：

• 如果想要网页产生3D效果需要透视，perspective（理解成3D物体投影在2D平面内）
• 模拟人类的视觉位置
• 也称为视距：眼睛到屏幕的距离
• 距离越近，平面成像越大；越远成像越小(近大远小)，将元素投到屏幕上。
• 单位是像素

透视 写在被观察元素的父盒子上！！！

哪个盒子（A盒子）添加了perspective,意思就是A盒子重新定义了观察的眼睛的位置。

transform-style:

子元素是否呈现3D效果。

添加的位置：被观察元素的父盒子。

• transform-style:flat；默认不开启3D空间
• transform-style:preserve-3d；开启3D空间
• 属性添加到父级，子元素才能保持3D 立体空间

css总结：