css3的坐标轴是相对于电脑屏幕还是物体自身？

清疚 2022-11-10 10:57 180阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1][]

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

实验思路：

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

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 2][]

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

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

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>试验css3的坐标轴是相对于电脑屏幕还是物体自身？</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          body {
            position: relative;
          }
          .box1,
          .box2 {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 100px;
          }
          .box1 {
            top: 30px;
            border: 1px solid pink;
          }
          .box2 {
            top: 160px;
            border: 1px solid purple;
          }
    
          .div1,
          .div2 {
            width: 100%;
            height: 100%;
          }
          .div1 {
            /* 先移动，后旋转 */
            background-color: pink;
            /* transform: translateX(300px) rotate(45deg); */
            transition: all 3s;
          }
          .div2 {
            /* 先旋转，后移动 */
            background-color: purple;
            /* transform: rotate(45deg) translateX(300px); */
            transition: all 3s;
          }
          .div1:hover {
            transform: translateX(300px) rotate(45deg);
          }
          .div2:hover {
            transform: rotate(45deg) translateX(300px);
          }
        </style>
      </head>
      <body>
        <div class="box1">
          <div class="div1">先移动，后旋转</div>
        </div>
        <div class="box2">
          <div class="div2">先旋转，后移动</div>
        </div>
      </body>
    </html>

参考资料：[https://blog.csdn.net/kbx8916/article/details/68064792?utm\_medium=distribute.pc\_relevant\_bbs\_down.none-task-blog-baidujs-1.nonecase&depth\_1-utm\_source=distribute.pc\_relevant\_bbs\_down.none-task-blog-baidujs-1.nonecase][https_blog.csdn.net_kbx8916_article_details_68064792_utm_medium_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase_depth_1-utm_source_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70]: /images/20221022/0ef0074d764449cdb401a0ef3add123d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/1dfff7857380418988adc9c326105cde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210318173102708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_kbx8916_article_details_68064792_utm_medium_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase_depth_1-utm_source_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase]: https://blog.csdn.net/kbx8916/article/details/68064792?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase