本文共 480 字，大约阅读时间需要 1 分钟。

今天跟着老师做 “旋转木马” 案例，想了好久一直想不明白，为什么每张图片的translateZ的值都相等，都是translateZ(300px)。

因为我理解的 Z轴 就是垂直屏幕呀。

经查阅，一语惊醒梦中人：

于是我就想做个小实验来确定，坐标轴X轴、Y轴和Z轴到底是相对于电脑屏幕还是物体自身？

实验思路：

在页面准备两个相同大小的盒子，第1个盒子，让它先沿X轴移动300px，再旋转45°。第2个盒子，让它先旋转45°，再沿X轴移动300px。

结果如下：

由此看出，css3的坐标轴X轴、Y轴和Z轴是相对于物体本身 的。我也明白了为什么老师做旋转木马时给每个图片的translateZ的值都相等了。

测试代码附上：是鼠标放到盒子1与盒子2上才看效果奥。

      
       
       
                   
   
      
    
     先移动，后旋转
    
    
   
    
   
      
    
     先旋转，后移动
    
    
   
  

参考资料：

转载地址：http://grcob.baihongyu.com/