title: Prevent an element to rotate itself in a circular CSS3 animation
body: <p>Ok so this is really getting frustrated for me here, first of all if my question framing is wrong please do edit it(if you think so)...and ok, as my screens will explain you, but still I would like that my element should stay in a specific shape and not to rotate along with the animation, am missing something really stupid thing?</p>
  
  <p><strong>What I Want</strong> :</p>
  
  <p><img src="https://i.stack.imgur.com/cFDGb.jpg" alt="What I Want"></p>
  
  <p><strong>What's Happening</strong> :</p>
  
  <p><img src="https://i.stack.imgur.com/Zrmf6.jpg" alt="What&#39;s Happening"></p>
  
  <p><em>jQuery Solutions Are Welcomed (But I Would Love CSS3 Solutions)</em></p>
  
  <blockquote>
    <p>Note: Don't go on the element's opacity, 1 is made using Paint and
    other with Photoshop, What Matter's Is Square Should Rotate As Square
    Shape</p>
  </blockquote>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@keyframes round_round {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(360deg);
      }
  }
  
  div {
      width: 50px;
      height: 50px;
      animation: round_round 3s linear infinite;
      margin: 50px auto 0;
      transform-origin: 50% 150px;
      background-color: #8FC1E0;
  }
  
  span {
      display: inline-block;
      margin: 5px;
      height: 5px;
      width: 5px;
      background: #c00000;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/s7Bsn/" rel="nofollow noreferrer"><strong>Demo</strong></a></p>