CSS変換元と回転を使って 'X'を作成する

Question

私は小さな問題がありますが、私は2スパンを回転させて完璧な 'X'を作成する必要があります。

私はJSfiddleを作成しました。みんな助けてくれますか？

私は、原点を変換する必要がありますどのくらいのまわりで私の頭を取得するように見えることはできません

...

HTML

<div class="toggle-btn"> 
    <span></span> 
    <span></span> 
</div> 

SASS

.toggle-btn { 
    width: 38px; 
    height: 19px; 
    cursor: pointer; 
    position: relative; 
    margin-top: 18px; 
    text-align: center; 
    &: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; 
    &.toggled { 
     &:nth-of-type(1) { 
     transform: rotate(-45deg); 
     transform-origin: 22px 9px; 
     } 
     &:nth-of-type(2) { 
     transform: rotate(45deg); 
     transform-origin: 20px -5px; 
     } 
    } 
    } 
} 

とJS

$('.toggle-btn').on('click',function(){ 
    $(this).find('span').toggleClass('toggled'); 
}); 

Answer 1

これは動作するようです。私はmargin to 4pxを調整しなければならなかった。回転後に平行移動すると、エレメントの原点の代わりにエレメントが回転している原点が変わるように見えるので、回転はx/y変換の後に来る必要があります。回転後に大きな（100px）x変換を試みることで、この動作を観察できます。

.toggle-btn { 
     width: 38px; 
     height: 19px; 
     cursor: pointer; 
     position: relative; 
     margin-top: 18px; 
     text-align: center; 
    overflow: show; 
     &:after { 
      content: ''; 
      display: block; 
      clear: both; 
     } 
     span { 
      height: 2px; 
      margin: 4px 0px; 
      background: #333; 
      width: 38px; 
      display: block; 
      transition: .15s ease-in; 
      text-align: center; 
      &.toggled { 
       &:nth-of-type(1) { 
        transform: translate(0px, 3px) rotate(-45deg); 
       } 
       &:nth-of-type(2) { 
        transform: translate(0px, -3px) rotate(45deg); 
       } 
      } 
     } 
    }