css3-----3D变换，前端开发入门到精通

x y z 的方向：

2、3d移动 translate3d

1.transform:translateX(npx);在x轴方向移动

2.transform:translateY(npx); 在y轴方向移动

3.transform:translateZ(npx); 在Z轴方向移动

4.transform:translate3d(x,y,z);综合写法

3、视距perspective

给元素添加3D效果，要给其父元素添加3D效果

视距：眼睛到屏幕的距离。视距与物体的大小关系成反比（近大远小）

translatrZ:物体距离屏幕的距离，z轴距离与物体的大小关系成正比（近大远小，translateZ变大，物体离眼睛越近，物体越大）

1. 设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)

2. 设置 人和物体的距离 （ 视距） 这个值规定要设置给物体的父元素 perspertive:npx

3. 动态改变物体的 translateZ 即可观察效果