移动web网页开发——3D转换

一、空间转换

• 空间：是从坐标轴角度定义的。x、y、和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
• 空间转换也叫3D转换
• 属性：transform 

    

1.1 空间位移

语法

• transform:translate3d(x,y,z);
• transform:translateX(值);
• transform:translateY(值);
• transform:translateZ(值);

取值（正负均可）

• 像素单位数值
• 百分比

1.2 透视

使用perspective属性实现透视效果 

• 思考： 生活中，同一个物体，观察距离不同，视觉上有什么区别？
  • 答：近大远小，近清楚远模糊
• 思考：默认情况下，为什么无法观察到Z轴位移效果？
  • 答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果 

属性（添加给父级）

• perspective:值;
• 取值：像素单位数值，数值一般在800~1200 
• 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

原理：