CSS unexpected style outcome

Question

why owl's right pupil has different position after clicking on owl and how I can solve that. I've know the error came from CSS transform: rotate() in both .eye .right and pup-right. But I don't know how to keep this rotate without affecting to position of pup-right
https://code.sololearn.com/WqCrbpJpWUUV

Edit: I read all the answers but none of them correct. Maybe, my css code is not readable enough. Lets me explain:
.left and .right are Childs of .eye
pup-left and .pup-right are Childs of .pupil

Answer 1

newStyle.innerHTML =`.pupil{
height:30px;
animation: none !important;
}`;

Keep learning & happy coding :D

Answer 2

.left {
left: 27%;
transform: rotate(90deg);
}
.pup-left { transform: rotate(-90deg);}