title: How to make all of my star to the left of the hovering one tilt?
body: <p>Right now, only the star my mouse on tilt. I would like all the stars to the left of the hovered star to tilt. I am not sure how to do it in the css, or is it possible to do that with my current setup? Please help.</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>.stars {
      width: auto;
      display: inline-block
  }
  input.star {
      display: none
  }
  
  label.star {
      float: right;
      padding: 5px;
      font-size: 20px;
      color: #4A148C;
      transition: all .2s
  }
  
  input.star:checked~label.star:before {
      content: '\f005';
      color: #FD4;
      transition: all .25s
  }
  
  input.star-5:checked~label.star:before {
      color: #FE7;
      text-shadow: 0 0 20px #952
  }
  
  input.star-1:checked~label.star:before {
      color: #F62
  }
  
  label.star:hover {
      transform: rotate(-15deg) scale(1.3)
  }
  
  label.star:before {
      content: '\f006';
      font-family: FontAwesome
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;div class="stars" id="star"&gt;
    &lt;input class="star star-5" id="star-5" type="radio" name="star" value="5" /&gt; 
      &lt;label class="star star-5" for="star-5"&gt;&lt;/label&gt; 
      &lt;input class="star star-4" id="star-4" type="radio" name="star" value="4" /&gt; 
      &lt;label class="star star-4" for="star-4"&gt;&lt;/label&gt; 
      &lt;input class="star star-3" id="star-3" type="radio" name="star" value="3" /&gt; 
      &lt;label class="star star-3" for="star-3"&gt;&lt;/label&gt; 
      &lt;input class="star star-2" id="star-2" type="radio" name="star" value="2" /&gt; 
      &lt;label class="star star-2" for="star-2"&gt;&lt;/label&gt; 
      &lt;input class="star star-1" id="star-1" type="radio" name="star" value="1" /&gt; 
      &lt;label class="star star-1" for="star-1"&gt;&lt;/label&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>