使用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); 
       } 
      } 
     } 
    }