Make button. Click Button. DIV with table turns and faces user, but does not work

Question

The script and styles are external. Click the button, div with a table in it turns to face user. The div with the table is already angled on its Y axis by CSS. Clicking the button again should get the div and table to turn back to original position.

 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

Here, NOTE: I changed the background-color of PanL so you can see it working. Only needed to change rotate class to be back to 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>