title: Speech bubble with rotation when mouse goes over it
body: <p>I'm in the process of playing with css a bit. Unfortunately, it doesn't look quite the way I'd like it to yet. The speech bubble should be smaller and directly above them. The other reason is the rotation when the mouse pointer goes over the speech bubble the complete speech bubble should rotate. Unfortunately, when you rotate it, everything else looks like a speech bubble....</p>
  <p>How do I make the bubble smaller and put it over them and how do I make the rotation look better.</p>
  <p><strong>HTML</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
  
  body {
    padding: 50px; 
    font-family: 'Montserrat', sans-serif;
  }
  
  .spinner-text {
    color: #fff;
  }
  
  .spinning {
     color: #fff;
  }
  .spinning:hover {
    width: 100px;
    height: 100px;
    color: #fff;
    background-color: #5869FF;
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    /* transform: rotate(3deg); */
     /* transform: rotate(0.3rad);/ */
     /* transform: rotate(3grad); */ 
     /* transform: rotate(.03turn);  */
  }
  
  @keyframes spin {
      from {
          transform:rotate(0deg);
      }
      to {
          transform:rotate(360deg);
      }
  }
  
  .bubble {
    position: relative;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 24px;
    width: 300px;
    color: #fff;
    background: #5869FF;
    border-radius: 40px;
    padding: 24px;
    text-align: center;
    color: #000;
  }
  
  .bubble-bottom-left:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 24px solid #5869FF;
    border-right: 12px solid transparent;
    border-top: 12px solid #5869FF;
    border-bottom: 20px solid transparent;
    left: 32px;
    bottom: -24px;
  }
  
  .blue {
    color: #5869FF;
  }
  
  .black {
    color: #3B3B3B;
  }
  
  .text {
    text-align: center;
    display: flex;
    margin-top: 35px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div class="spinning"&gt;
      &lt;div class="bubble bubble-bottom-left" contenteditable&gt;
          &lt;div class="spinner-text"&gt;
            :)
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="text"&gt;
      &lt;div class="blue"&gt;this&lt;/div&gt;
      &lt;div class="black"&gt;is&lt;/div&gt;
      &lt;div class="blue"&gt;name&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I have</p>
  <p><a href="https://i.stack.imgur.com/SKGtr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SKGtr.png" alt="enter image description here" /></a></p>
  <p>What I want</p>
  <p><a href="https://i.stack.imgur.com/16ZBV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/16ZBV.png" alt="enter image description here" /></a></p>