Вот HTML
<button id="isClosed" onclick="openSection()">Activities <span>▴</span>
</button>
<button id="isOpen" onclick="closeSection()" style="display:none">Activities ▴
</button>
И CSS
span{
display: inline-block;
color: #818181;
transition: 0.5s;
-webkit-transform: scale(1,-1) translateY(-.18em);
transform: scale(1,-1) translateY(-.18em);
}
Эффект, который я пытаюсь сделать, заключается в преобразовании направленного вниз треугольника Юникода в направленный вверх треугольник Юникода (причина в том, что я не могу найти идентично отраженную стрелку, указывающую вверх). Поэтому я использую тег span, чтобы перевернуть треугольник и сдвинуть его вниз, чтобы он оставался на месте.
Он отлично работает на настольном компьютере, но когда я загружаю его на мобильный, диапазон CSS только переворачивается, но не переводится.