Trying to create an eye test by rotating the letter "E" when a directional button is clicked. However, facing an issue where the "E" changes position after the initial click instead of staying in place. Here is a GIF showcasing the problem:
https://i.stack.imgur.com/Mx2Ii.gif
Current styling being used:
div.container4 p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
}
HTML code snippet:
<div class="container4" style="height:inherit;">
<p id="E">E</p>
</div>
Here is the JavaScript function responsible for rotating the "E":
rotateE: function () {
var step = Math.floor((Math.random() * 4) + 1);
switch (step) {
case 1:
$('#E').css({ 'transform': 'rotate(' + 90 + 'deg)' })
break;
case 2:
$('#E').css({ 'transform': 'rotate(' + 180 + 'deg)' })
break;
case 3:
$('#E').css({ 'transform': 'rotate(' + 270 + 'deg)' })
break;
case 4:
$('#E').css({ 'transform': 'rotate(' + 360 + 'deg)' })
break;
default:
}
}
Upon inspecting the dev tools, noticed that the
transform: translate(-50%, -50%);https://i.stack.imgur.com/h0OuM.png
Appreciate any assistance in resolving this matter.