为什么y轴与x、z轴顺时针旋转，角度正负不一样，我可以通过什么方式可以去验证？

首页课程实战体系课手记专栏慕课教程

来源：2-15 【总结】平移、旋转的正方向总结

weixin_慕的地2217823

2022-10-18 17:49:50

WSM

写回答

1回答

好帮手慕久久

2022-10-18

同学你好，各个轴旋转角度的正负方向，是规定好的，没有原因，记住就行了。可以通过写代码验证，比如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 200px auto;
      perspective: 300px;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(0deg);
    }

    .box p {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
    }

    .box p:nth-child(1) {
      background-color: rgba(219, 56, 211, 0.486);
      /* 前面 */
      transform: translateZ(100px);
    }

    .box p:nth-child(2) {
      background-color: rgba(42, 128, 199, 0.486);
      /* 顶面 */
      transform: rotateX(90deg) translateZ(100px);
    }

    .box p:nth-child(3) {
      background-color: rgba(56, 219, 83, 0.486);
      /* 背面 */
      transform: rotateX(180deg) translateZ(100px);
    }

    .box p:nth-child(4) {
      background-color: rgba(213, 216, 32, 0.486);
      /* 底面 */
      transform: rotateX(-90deg) translateZ(100px);
    }

    .box p:nth-child(5) {
      background-color: rgba(236, 82, 102, 0.486);
      /* 侧面 */
      transform: rotateY(90deg) translateZ(100px);
    }

    .box p:nth-child(6) {
      background-color: rgba(119, 17, 236, 0.486);
      /* 侧面 */
      transform: rotateY(-90deg) translateZ(100px);
    }
  </style>
</head>

<body>
  <div class="box">
    <p>正面</p>
    <p></p>
    <p></p>
    <p>底面</p>
    <p></p>
    <p></p>
  </div>
</body>

</html>

这是一个立方体，可以打开控制台，直接在控制台中调整.box的rotateX的值，当值从0变大时，旋转方向如下：