title: Rotate Circle with css hover
body: <p>I created an simple website:<img src="https://i.stack.imgur.com/610dI.png" alt="enter image description here"></p>
  
  <p>So there is an circle above an image, i tried to rotate it on hover, but it simply wont worked! Heres my code! </p>
  
  <pre><code>&lt;div class="image" id="landkreis"&gt;
  &lt;img src="reg.png" alt="" width="100%" height="auto" /&gt;
  &lt;span id="motha2"&gt;
  &lt;h6&gt;&lt;br&gt;Here&lt;br&gt;i am&lt;/h6&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  
  h6 {text-align:center;
  color:#f2f2f2;
  font-size: 75px;
  line-height: 74px;
  font-weight:700;
  margin: 0 5px 24px;
  font-family: 'Route';}
  
  #motha2 {
  position: absolute; 
  top: 1px; 
  left: 15%; 
  width: 300px;
  height:300px;
  border-radius: 150px; 
  background-color:#4ec461 ; } 
  
  h6:hover {transform:rotate(-90deg);}
  </code></pre>
  
  <p>UPDATEUPDATE!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
  
  <p>Ok the transition works but how can i make the hole transition smooth and that for examle it first rotates -15deg an then to 15deg and stops finally at 0deg?</p>