javascript - 制作按钮。单击按钮。带表格的 DIV 转向并面向用户，但不起作用

Question

脚本和样式是外部的。单击该按钮，其中带有表格的 div 变为面向用户。带有表格的 div 已经通过 CSS 在其 Y 轴上倾斜。再次单击该按钮应使 div 和表格返回到原始位置。

document.getElementById('larrow').onclick = function() {
  document.getElementById('PanL').classList.toggle('rotated');
};

#PanL {
  width: 380;
  height: 380;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.62);
  border-radius: 15px;
  position: absolute;
  z-index: 1;
  margin: 7% 0% 0% 5.5%;
  float: left;
  -webkit-transform: perspective(600px) rotateY(84.5deg);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#PanL.rotated {
  -webkit-transform: rotateY(66deg);
  -moz-transform: rotateY(66deg);
  -ms-transform: rotateY(66deg);
  -o-transform: rotateY(66deg);
  transform: rotateY(66deg);
}

#larrow {
  float: left;
  position: absolute;
  z-index: 6;
  margin: 19% 0% 0% 11.5%;
  width: 58px;
  height: 58px;
  background-image: url(image);
  border-radius: 50%;
  border: 1px solid gray;
  outline: 0;
}

<button id="larrow"></button>

<div id="PanL">
  <table class="panMid">
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
  </table>
</div>

Answer 1

在这里，注意:我更改了 PanL 的 background-color 以便您可以看到它正在运行。只需将旋转等级更改为 0deg。

document.getElementById('larrow').onclick = function() {
  document.getElementById('PanL').classList.toggle('rotated');
};

#PanL {
  width: 380;
  height: 380;
  background-repeat: no-repeat;
  background-color: red;
  border-radius: 15px;
  position: absolute;
  z-index: 1;
  margin: 7% 0% 0% 5.5%;
  float: left;
  -webkit-transform: perspective(600px) rotateY(84.5deg);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  
}

#PanL.rotated {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

#larrow {
  float: left;
  position: absolute;
  z-index: 6;
  margin: 19% 0% 0% 11.5%;
  width: 58px;
  height: 58px;
  background-image: url(image);
  border-radius: 50%;
  border: 1px solid gray;
  outline: 0;
}

<button id="larrow"></button>

<div id="PanL">
  <table class="panMid">
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
    <tr class="owstR">
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
      <td class="dTs"></td>
    </tr>
  </table>
</div>