3D转

3D转换

特点：近大远小，

• 3D移动translate3d

  • transform:translateX(px);
  • transform:translateY(px);
  • transform:translateZ(px);单位一般为px，正数向外走，负数向内走
  • 简写：transform:translate3d (x,y,z);xyz不可省略，没有写0

• 透视perspective

  模拟人眼到屏幕的距离，z轴的设置要配合透视才有效果

  • 透视写到被观察元素的上级盒子里，不一定是父盒子
  • z越小，盒子越小
  • 透视越小，视距越小，盒子就越大

• 旋转rotate3d

  3d旋转可以让元素沿着x轴，y轴或者z轴旋转，加上透视会让旋转更立体

  transform:rotateX(deg);沿着x轴旋转
  transform:rotateY(deg);沿着y轴旋转
  transform:rotateZ(deg);沿着z轴旋转
  transform:rotate3d(x,y,z,deg);
  

  沿着x轴旋转翻转度数的正负影响元素的翻转方向，左手法则

沿着y轴旋转翻转度数的正负影响元素的翻转方向，左手法则

• 3D呈现transform-style:flat(平面，默认属性，不开启3d立体空间)

  • transform-style:preserve-3d;保持3d,开启3d立体空间
  • 代码写给父级，上上级不可以，受影响的是子盒子