После поворота мой div перемещает местоположение и никогда не возвращается

Question

Я вращаю букву «Е» для проверки зрения, поэтому, когда пользователь нажимает кнопку направления, буква «Е» будет вращаться.Моя проблема в том, что «Е» меняет местоположение после первого клика.Мне нужно, чтобы оставаться в той же позиции.Вот GIF вхождения:

Мой стиль:

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;            
    }

Код:

<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:

    }
}

Что-то, что я заметил в инструментах разработчика, было то, что transform: translate(-50%, -50%); отменяется после первого клика:

Спасибо за любую помощь, чтобы исправить это.

Answer 1

Преобразование, примененное с javascript, переписывает преобразование, указанное в CSS.Либо добавьте translate(-50%, -50%) к преобразованиям JS, либо измените стили, чтобы избежать использования преобразования.Если вы хотите центрировать элемент, вы всегда можете использовать flexbox вместо абсолютного позиционирования и преобразования.

div.container4 {
    display: flex;
    justify-content: center;
    align-items: center;          
}