JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div>
  Text
</div>

<p onmouseover="rotate(45)">Deutschland</p>
<p onmouseover="rotate(90)">Ă–sterreich</p>

CSS

p {
  display: block;
}

div {
  width: 150px;
  height: 150px;
  background: lightgrey;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out;
}

JavaScript

function rotate(degree) {
  // Code for Safari
  document.querySelector("div").style.WebkitTransform = "rotate(" + degree + "deg)";
  // Code for IE9
  document.querySelector("div").style.msTransform = "rotate(" + degree + "deg)";
  // Standard syntax
  document.querySelector("div").style.transform = "rotate(" + degree + "deg)";
}