CSS从汉堡包图标转换为交叉到箭头

我试图使用CSS变换从三线汉堡菜单中设置一个图标,以交叉到右箭头.第一次改造工作顺利,但我被困在第二次：横向箭头.

这是一个小提琴：

https://jsfiddle.net/v0fgvdg2/25

以及SCSS的相关风格：

.threebar {
  cursor: pointer;
  margin-top: 33px;
  margin-left: 33px;
  .bar {
    width: 70px;
    height: 22px;
    background: #000;
    margin-bottom: 11px;
    transition: all 0.5s ease;
    &:nth-child(1) {
      transform-origin: 50%;
    }
    &:nth-child(2) {
      transform-origin: 50%;
    }
  }
  &.cross {
    .bar:nth-child(1) {
      transform: translateY(75%)  rotate(45deg);
    }
    .bar:nth-child(2) {
      transform: translateY(-75%) rotate(-45deg);
    }
    .bar:nth-child(3) {
      opacity: 0;
    }
  }
  &.arrow {
    .bar:nth-child(1) {
      background: red;
      transform: scaleX(0.5) translateY(50%) rotate(45deg);
    }
    .bar:nth-child(2) {
      background: blue;
      transform: scaleX(0.5) translateY(50%) rotate(-45deg);
    }
    .bar:nth-child(3) {
      opacity: 0;
    }
  }
}

我无法真正理解如何将变换应用于箭头状态.

我希望右箭头像十字架的左侧,因此是scaleX(0.5),但这会产生扭曲形状的效果,而不是像我希望的那样简单地将它减半.

有没有人有关于如何思考的提示？

非常感谢！

最佳答案

这是产生您正在寻找的效果的一种方法.我已经改变了位置和其他东西,但基本的想法仍然与原来的相同.我已经完全定位了所有三个bar元素,并使用transform：translateY()将它们放入原始位置.当形状需要变成箭头时,我已经改变了变换原点,然后应用了必要的变换.

SCSS代码：

.threebar {
  cursor: pointer;
  position: relative;
  height: 88px; /* 22px * 3 + space between (11px * 2) */
  margin-top: 33px;
  margin-left: 33px;
  .bar {
    position: absolute;
    width: 70px;
    height: 22px;
    background: #000;
    top: 33px;
    transition: all 0.5s ease;
    &:nth-child(1) {
      transform: translateY(-150%);
    }
    &:nth-child(3) {
      transform: translateY(150%);
    }
  }
  &.cross {
    .bar:nth-child(1) {
      transform: rotate(45deg);
    }
    .bar:nth-child(3) {
      transform: rotate(-45deg);
    }
    .bar:nth-child(2) {
      opacity: 0;
    }
  }
  &.arrow {
    .bar:nth-child(1) {
      transform-origin: right center;
      transform: translateY(33%) rotate(45deg);
    }
    .bar:nth-child(3) {
      transform-origin: right center;
      transform: translateY(-33%) rotate(-45deg);
    }
    .bar:nth-child(2) {
      opacity: 0;
    }
  }
}

使用编译的CSS进行演示：

//Hamburger to cross

$(document).on('click','.hamburger',function() {
  $('.threebar')
    .removeClass('hamburger')
    .addClass('cross');
});

// Cross to Arrow 
$(document).on('click','.cross',function() {
  $('.threebar')
    .removeClass('cross')
    .addClass('arrow');
});

// Arrow to Hamburger 
$(document).on('click','.arrow',function() {
  $('.threebar')
    .removeClass('arrow')
    .addClass('hamburger');
});

.threebar {
  cursor: pointer;
  position: relative;
  height: 88px; /* 22px * 3 + space between (11px * 2) */
  margin-top: 33px;
  margin-left: 33px;
}
.threebar .bar {
  position: absolute;
  width: 70px;
  height: 22px;
  background: #000;
  top: 33px;
  transition: all 0.5s ease;
}
.threebar .bar:nth-child(1) {
  transform: translateY(-150%);
}
.threebar .bar:nth-child(3) {
  transform: translateY(150%);
}
.threebar.cross .bar:nth-child(1) {
  transform: rotate(45deg);
}
.threebar.cross .bar:nth-child(3) {
  transform: rotate(-45deg);
}
.threebar.cross .bar:nth-child(2) {
  opacity: 0;
}
.threebar.arrow .bar:nth-child(1) {
  transform-origin: right center;
  transform: translateY(33%) rotate(45deg);
}
.threebar.arrow .bar:nth-child(3) {
  transform-origin: right center;
  transform: translateY(-33%) rotate(-45deg);
}
.threebar.arrow .bar:nth-child(2) {
  opacity: 0;
}