CSS 3D + 动画

3D转换

一、3维坐标系

• x轴 水平向右
• y轴 垂直向下
• z轴 垂直屏幕 由屏幕里面指向屏幕的外面

二、3D位移

1. transform:translate3d(x,y,z) ; 其中 x y z分别指要移动的轴的方向的距离
2. translform: translateX(100px) ; 在x轴上移动
3. translform: translateY: (100px) ; 在Y轴上移动
4. translform: translateZ: (100px) ; 在Z轴上移动

视距 perspertive

perspective: 1000px;

• 要想看到在Z轴上面的变化就要添加视距
• 数值相可以理解为脸到电脑屏幕的距离
• 数值越