css新特性之3D效果呈现

css新特性之3D效果呈现

一、基础知识介绍
1、3D坐标系

css中三维坐标系与我们平时数学中的三维坐标系有一定的差距，主要表现在Y轴和Z轴。
X轴：水平向右为正，水平向左为负
Y轴：垂直向下为正，垂直向上为负
Z轴：从界面向外为正，向里为负
总结：右下外为正，左上里为负
2、透视图prespective
概念：又名视距，就是眼睛到屏幕的距离（下图中的d），d越大，图形立体感越弱，其中z是物体到屏幕的距离，z越大，图形立体感越明显。
作用：使图形更有立体感，一般遵循近大远小的规则。

注意点：透视图特性一般都写在被观察元素的父级盒子上，效果特现在其子元素上。

3、 transform-style特性
作用：鼠标经过时，盒子可以沿Z轴进行一定的旋转，一般默认为不添加3d效果，需要进行3d展示时，必须在父级盒子上添加该属性。

  transform-style: preserve-3d;

二、案