CSS 从汉堡包图标转换为十字形和箭头

Question

我正在尝试使用 CSS 变换将三行汉堡菜单中的图标设置为动画以交叉到右向箭头。第一个转换效果很好，但我停留在第二个转换上：交叉到箭头。

这是一个fiddle:

以及S中的相关样式CSS:

.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)，但这具有扭曲形状的效果，而不是像我希望的那样简单地将其减半。

有没有人对如何思考这个问题有任何建议？

非常感谢帮助！

Answer 1

这是产生您正在寻找的效果的一种方法。我稍微改变了定位和其他内容，但基本思想与您原来的思想相同。我已经绝对定位了所有三个条形元素，并使用 transform: translateY() 将它们放到原来的位置。当形状需要变成箭头时，我更改了 transform-origin，然后应用了必要的变换。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='threebar hamburger'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>

不同维度的演示：

输出似乎也相当灵敏。下面是一个具有不同尺寸的条形的演示。

//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: 90px;
  margin-top: 33px;
  margin-left: 33px;
}
.threebar .bar {
  position: absolute;
  width: 75px;
  height: 25px;
  background: #000;
  top: 25px;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='threebar hamburger'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>

箭头与十字左半部分完全相同的演示：

我最初的假设是你只需要十字架变成箭头（类似于十字架的左半部分）。如果您想让它与左半部分完全相同（即按比例缩小），那么您可以使用下面的代码片段。

//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;
  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: translateX(-33.33%) translateY(33%) rotate(45deg) scaleX(0.66);
}
.threebar.arrow .bar:nth-child(3) {
  transform-origin: right center;
  transform: translateX(-33.33%) translateY(-33%) rotate(-45deg) scaleX(0.66);
}
.threebar.arrow .bar:nth-child(2) {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='threebar hamburger'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>

Answer 2

您的示例中的问题是转换操作的顺序。您需要记住，首先执行最右边的操作，在您的情况下是旋转。只有这样才会应用缩放，这会导致您看到奇怪的角度。

所以，只要把顺序转过来，你就更清楚了，你不需要改变原点或使用倾斜操作：

transform: translateY(50%) rotate(45deg) scaleX(0.5);

Simple DEMO（你还需要调整翻译）

CSS 从汉堡包图标转换为十字形和箭头

CSS transform from hamburger icon to cross to arrow

css

css-transforms

css-shapes