¿Hay alguna manera de rotar la letra A sobre la letra B que se encuentra en el aire usando HTML, CSS y JS? ~ parece que no funciona, porque "B" está al lado de "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); }

Ejemplo de código: https://jsfiddle.net/f4p6rzgs/1