title: Create 'X' with using CSS transform-origin and rotate
body: <p>I have a small issue, I need to rotate 2 spans and create a perfect 'X'.</p>
  
  <p>I've created a <a href="https://jsfiddle.net/av5c7jL4/" rel="nofollow noreferrer">JSfiddle</a> for this. Can you guys help me?</p>
  
  <p>I can't seem to get my head around how much should i transform origin...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="toggle-btn"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SASS</p>
  
  <pre><code>.toggle-btn {
    width: 38px;
    height: 19px;
    cursor: pointer;
    position: relative;
    margin-top: 18px;
    text-align: center;
    &amp;:after {
      content: '';
      display: block;
      clear: both;
    }
    span {
      height: 2px;
      margin: 5px 0px;
      background: #333;
      width: 100%;
      display: block;
      transition: .15s ease-in;
      text-align: center;
      &amp;.toggled {
        &amp;:nth-of-type(1) {
          transform: rotate(-45deg);
          transform-origin: 22px 9px;
        }
        &amp;:nth-of-type(2) {
          transform: rotate(45deg);
          transform-origin: 20px -5px;
        }
      }
    }
  }
  </code></pre>
  
  <p>and JS</p>
  
  <pre><code>$('.toggle-btn').on('click',function(){
     $(this).find('span').toggleClass('toggled');
  });
  </code></pre>