transform3D转换

3D转换

三维坐标系

• x轴:水平向右 注意:x右边是正值,左边是负值
• y轴:垂直向下 注意:y下边是正值,上边是负值
• z轴:垂直屏幕 注意:往外面是正值,往里面是负值

主要知识点

1. 3D位移:translate3d(x,y)

/* 仅在x轴移动 */
transform:translateX()
/* 仅在y轴移动 */
transform:translateY()
/* 仅在z轴移动(注意:translateZ一般用px单位)*/
transform:translateZ()
/* xyz是不能省略的,如果没有就写0 */
transform:translate3d(x,y,z)

2. 3D旋转:rotate3d(x,y)

/* 沿着x轴旋转 等同于transform: rotate3d(1,0,0,deg);*/
transform:rotateX()
/* 沿着y轴旋转 等同于transform: rotate3d(0,1,0,deg);*/
transform:rotateY()
/* 沿着z轴旋转 等同于transform: rotate3d(0,0,1,deg);*/
transform:rotateZ(