css空间转换transform 3D

空间转换（三维）transform 3D

平移

• transform:translateZ()
  • z轴是指垂直屏幕向外的轴
  • 可以实现z轴方向的位置便宜
  • z轴偏移正值是屏幕向外的反向，负值是屏幕向内的反向
• transform:translate3d(x,y,z)

透视（视距）

• perspective:800~1200px
• 就是指人眼观察物体的距离，取值一般为800~1200px

旋转

• transform:rotateZ()

  平面旋转就是围绕Z轴旋转

• transform:rotateX()

• transform:rotateY()

• transform:rotate3d(x,y,z,deg)

  x,y,z的作用是描述一个方向，一个向量

• 左手定则---大拇指沿着轴的正方向，手指环绕方向就是正值

3d呈现

• transform-style:preserve-3d

  作用：默认情况下，子元素的3d效果并不会保留下来，如果需要保留，需要在父容器中设置这个样式

立方体

  
  
  
  
  



  

    
1
    
2
    
3
    
4
    
5
    
6
  

缩放

• scale3d()

  没啥用