I am rotating an "E" to make an eye test, so when the user clicks the directional button the "E" will rotate. My problem is that the "E" changes location after the initial click. I need it to stay in the same position. Here is a GIF of the occurrence:
My styling:
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;
}
Code:
<div class="container4" style="height:inherit;">
<p id="E">E</p>
</div>
JavaScript:
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:
}
}
Something I did notice in dev tools was that the transform: translate(-50%, -50%);
gets cancelled out after the first click:
Thank you for any help to correct this.