Почему спозиционированный элемент при свойстве rotate меняет местоположение?

Question

[Дмитрий Ярощук]

У заголовка есть с позиционированный элемент и при добавление класса заголовку, с позиционированный элемент получает свойство transform: rotate(180deg) и при этом меняет месторасположения, хотя я хочу чтобы он развернулся на месте

<div class="accordion__button">Можно ли продлить срок действия исключительного права?</div>

.accordion__button {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 0 20px 20px;
    background: #363636;
    border-radius: 8px;
    font-family: "Montserrat Medium", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    color: #F9F9F9;
    -webkit-transition: max-height 1.4s ease;
    transition: max-height 1.4s ease;
}
.accordion__button::after {
    content: url(../image/accordion__arrow.svg);
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 20px;
    transition: transform 0.5s ease-in;
}
.accordion__wrapper.active .accordion__button::after {
    transform: rotate(180deg);
}

Изначальное состояние:

Активное состояние:

Answer 1

[RAX7]

.accordion__wrapper.active .accordion__button::after {
    transform: translateY(-50%) rotate(180deg);
}

Answer 2

[wadowad]

Я бы сделал так:

.accordion__button::after {
    content: url(../image/accordion__arrow.svg);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
    transition: transform 0.5s ease-in;
}
.accordion__wrapper.active .accordion__button::after {
    transform: rotate(180deg);
}

Answer 3

[cssfish]

потому что transform только один, а у вас в нем был translateY а стал rotate.
Так что либо пишете оба, как у RAX7, либо применяете трансформации к разным сущностям.
Т.е. если translateY к обертке например (тогда вместо :after надо некий блок), а rotate уже к стрелке