Javascript 如何围绕glyph'；垂直中点或中心点

我有一个隐藏的面板，在点击

div

之前一直隐藏在屏幕外（请参阅附件中的可运行代码片段）

单击此

div

时，面板将显示在屏幕上，并且

div

内容（单个字形或字符）将旋转180度

问题在于，旋转原点位于图示符垂直中间以外的某个点附近。发生旋转时，轮廓向上移动几个像素

如何测量轮廓属性并设置旋转原点，以便在旋转时围绕轮廓的垂直中间或中心旋转

var show\u panel=function（）{
var e=document.getElementById（“面板”）；
如果（如类列表）{
e、 切换（“显示”）；
}
否则{
var classes=e.className；
if（classes.indexOf（“show”）>=0）{
e、 className=classes.replace（“show”，”）；
}
否则{
e、 className=classes+“显示”；
}
}
};
正文{
保证金：0；
填充：0；
溢出：隐藏；
字体系列：system，-apple system，“.SFNSDisplay Regular”，“Helvetica Neue”，“Helvetica”，sans serif！重要；
}
#面板{
宽度：300px；
/*边框：2倍实心rgba（33,33,33,0.0933）*/
背景色：rgba（33,33,33,0.0933）；
位置：固定；
顶部：60px；
左：-275px；
填充物：5px；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
}
#panel.show{
左：-5px；
}
#面板控制器{
位置：绝对位置；
右：5px；
文字装饰：无；
颜色：黑色；
字体大小：粗体；
字号：2em；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
}
#panel.show.controller{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}

单击“x”以触发显示面板。请注意，“x”如何不在图示符的垂直中点上旋转，而是向上移动
x
简单：当你想要一个图标时，不要使用字形

图标可以很容易地旋转对称，使其在翻转时不会“向上移动”

要了解“x”不对称的确切原因，请查看以下内容：


.x{
显示：内联块；
背景：粉红色；
}
.翻了{
变换：旋转（180度）；
}
x
x
您可以通过设置css属性来实现它
变换原点：50%50%
它将提供围绕元素中心的变换。我希望这能起作用。
在IE中对我不起作用，因为你没有包括未固定的
转换
和
转换
属性……我主要对支持当前标准的浏览器感兴趣。所以你想支持当前标准，但你使用了过时的供应商前缀。嗯，很有道理。你的意思是，你对IE抱有偏见，因为你从IE6开始就没有接触过它，并且认为它一定仍然像当时一样糟糕。相信我，事实并非如此。我正在寻找一个使用字形（最终是图标字体）的答案。然后确保它们是旋转对称的<代码>x

不是，正如您可以清楚地看到的那样。感谢您的帮助-通过对y百分比进行一些调整，效果更好。