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

使用CSS transform-origin和rotate创建'X'

1 个答案: