title: Rotating a shadow on social icons hover state
body: <p>I've just started to work on a pure css set of social icons. Everything is going pretty smooth but I can't get this half circle shadow to rotate correctly.</p>
  
  <p>The transition seems to be working correctly but the positioning of the shadow is not correct. It may be due to the axis point it is rotating on but it seems to be correct. Without any transition I can get the shadow aligned correctly with,</p>
  
  <pre><code>top: 7px;
  right: 15px;
  </code></pre>
  
  <p>but the shadow's parent is positioned relative and should keep the shadow inside of it without problems. I also tried top, left 5px since there is a 5px border on it but this also did not work.</p>
  
  <p>Here is the css for the shadow:</p>
  
  <pre><code>.shadow {
      height: 45px;
      width: 100%;
      overflow: hidden;
      position: absolute;
      top: 7px;
      right: 15px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transition: all 0.6s ease;
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
  }
  
  .shadow:before {
      content: "";
      width: 90px;
      height: 90px;
      position: absolute;
      display: block;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.1);
  }
  
  .icon:hover .shadow {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      bottom: 7px;
      left: 15px;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>My Test Runs</strong></p>
  
  <p>Shadow without top, left, right, and bottom used: <a href="http://jsfiddle.net/wXLf6/" rel="nofollow">Demo</a></p>
  
  <p>Full set of icons with top, left, right, and bottom used: <a href="http://jsfiddle.net/Josh_Powell/SVHny/3/" rel="nofollow">Demo</a></p>
  
  <p>With the use of transform-origin: <a href="http://jsfiddle.net/Josh_Powell/SVHny/5/" rel="nofollow">Demo</a></p>
  
  <p><strong>I do know why</strong>, on the full set of icons, it is transitioning so poorly but I am unsure of how to align this shadow correctly. Any ideas on how I can get this shadow to rotate inside of the icon correctly?</p>