Is there a way to rotate letter A on letter B hovered using HTML, CSS and JS? ~ seems to doesn't work, because "B" is next to "A"

HTML

<h2 class='h2' id='A' style="display:inline-block;">A</h2>
<h2 class='h2' id='B' style="display:inline-block;">B</h2>

CSS

.h2
{
    font-size: 50px;
    font-family: times new roman;
    font-style: regular;
    color: black;
}
#A:active
{
    transform: scale(1.5);
}
#B:hover ~ #A
{
    transform: rotate(90deg);
}

Code example: https://jsfiddle.net/f4p6rzgs/1