奇怪的坐标系

最近在入门可视化的时候发现一个很神奇的点，css3d的坐标轴、页面3d坐标轴、数学坐标轴不是完全一致的

1. 页面3d坐标轴

x轴从左向右，y轴从下向上，z轴从外向里

2. css坐标轴

x轴从左向右，y轴从上向下，z轴从里向外

3. 数学坐标轴

x轴从左向右，y轴从下向上，z轴从里向外

4. css3d坐标轴的旋转遵循左手法则

x轴旋转时，左手大拇指指向x轴的正方向，即从左往右，弯曲其他四指，其他手指弯曲的方向就是x轴旋转的正方向； y轴旋转时，左手大拇指指向y轴的正方向，即从下往上，其他手指弯曲的方向就是y轴旋转的正方向； z轴旋转时，左手大拇指指向z轴的正方向，即从外往里，其他手指弯曲的方向就是z轴旋转的正方向。

代码：

<div class="area">
    <div class="container">
          <div class="x"></div>
          <div class="y"></div>
          <div class="z"></div>
    </div>
</div>

.area {
  position: relative;
  perspective: 2000px;
}
.container {
  transform-style: preserve-3d;
  position: absolute;
  left: 200px;
  top: 240px;
  /* 页面3d坐标轴 & css坐标轴 */
  transform: rotateY(-30deg);
  /* 数学坐标轴 */
  /* transform: rotateY(-30deg); */
}
.x, .y, .z {
  position: absolute;
  width: 200px;
  height: 2px;
  transform-origin: left top;
}
.x {
  background: red;
  transform: rotateX(0);
}
.x::after {
  content: '＞';
  font-weight: bolder;
  position: absolute;
  color: red;
  left: 188px;
  top: -13px;
}
.y {
  background: green;
  /* 页面3d坐标轴 & 数学坐标轴 */
  transform: rotateZ(-90deg);
  /* css坐标轴 */
  /* transform: rotateZ(90deg); */
}
.y::after {
  content: '＞';
  font-weight: bolder;
  position: absolute;
  color: green;
  left: 188px;
  top: -13px;
}
.z {
  background: blue;
  /* 页面3d坐标轴 */
  transform: rotateY(90deg);
  /* css坐标轴 & 数学坐标轴 */
  /* transform: rotateY(-90deg); */
}
.z::after {
  content: '＞';
  font-weight: bolder;
  position: absolute;
  color: blue;
  left: 188px;
  top: -13px;
}