Question

如下面的JSfiddle中所示，在click事件发生后，两个span（块）元素旋转45deg以形成“X”。然而，两个元素都略微向左拉，以形成一个“X”，它略微偏离父母真正的中心原点。

我非常感谢如何将我的“X”形式放在父母的真实中心。此外，如果有人可以在其他地方找到答案，我们非常感激，因为我的搜索结果是空的。

目前我在点击事件后使用以下“transform-origin”形成“X”：

 <div class="input-group">
   <input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />    
   <label class="input-group-addon" for="datepicker-start">
     <span class="glyphicon glyphicon-calendar"></span>
   </label>
 </div>

没有它，事情真是一团糟。

这是JSfiddle：https://jsfiddle.net/STEEZENS/L74p1ok3/

HTML

transform-origin: 21% 50%;

Answer 1

我能够通过将transform-origin更改为绝对值（px）并添加translateX以及旋转来实现所需的结果，以补偿（？）明显的平移以前存在过。

https://jsfiddle.net/voz8Lnhd/1/

#hamburger-icon .line {
    display: block;
    position: absolute;
    width: 75px;
    height: 4px;
    border-radius: 4px;
    background-color: white;
    transition: all .3s ease 0s;
    transform-origin: 21px center;
}
#hamburger-icon.active-rotate .line-1 {
    transform: rotate(45deg) translateX(6px);
    -webkit-transform: rotate(45deg) translateX(6px);
    -moz-transform: rotate(45deg) translateX(6px);

}
#hamburger-icon.active-rotate .line-3 {
    transform: rotate(-45deg) translateX(6px);
    -webkit-transform: rotate(-45deg) translateX(6px);
    -moz-transform: rotate(-45deg) translateX(6px);
}

在JQuery .click事件之后没有居中的元素（尽管变换原点调整）

1 个答案: