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