如何围绕字形的垂直中间或中心点应用 CSS 旋转过渡

Question

我有一个隐藏面板，它位于屏幕外，直到 div 被点击（见附件，可运行的代码片段）。

单击此 div 时，面板出现在屏幕上并且 div 内容（单个字形或字符）旋转 180 度。

问题是旋转原点围绕着某个点而不是字形的垂直中间。发生旋转时，字形会向上移动几个像素。

如何测量字形属性并设置旋转原点，使其在旋转时围绕字形的垂直中间或中心旋转？

var show_panel = function() {
 var e = document.getElementById("panel");
 if (e.classList) {
  e.classList.toggle("show");
 }
    else {
     var classes = e.className;
     if (classes.indexOf("show") >= 0) {
      e.className = classes.replace("show", "");
     }
     else {
      e.className = classes + " show";
     }
    }
};

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Helvetica", sans-serif !important;
}

#panel {
   width: 300px;
   /* border: 2px solid rgba(33, 33, 33, 0.0933); */
   background-color: rgba(33, 33, 33, 0.0933);
   position: fixed;
   top: 60px;
   left: -275px;
   padding: 5px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#panel.show {
   left: -5px;
}

#panel .controller {
   position: absolute;
   right: 5px;
   text-decoration: none;
   color: black;
   font-weight: bold;
    font-size: 2em;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#panel.show .controller {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

<html lang="en">
  <body>
    <p class="panel_description">Click on the "x" to trigger showing the panel. Note how the "x" does not rotate on the vertical midpoint of the glyph, but instead moves upwards</p>
    <div id="panel">
      <div onclick="show_panel();" class="controller">x</div>
    </div>
  </body>
</html>

Answer 1

简单：当你想要一个图标时不要使用字形。

一个图标可以很容易的做成旋转对称的，翻转的时候不会"move up"。

要准确了解您的 "x" 不对称的原因，请查看：

.x {
  display: inline-block;
  background: pink;
}
.flipped {
  transform: rotate(180deg);
}

<div class="x">x</div>
<div class="x flipped">x</div>

Answer 2

您可以通过设置 css 属性transform-origin: 50% 50% 来实现它，它将提供围绕元素中心的变换。我希望这有效。

如何围绕字形的垂直中间或中心点应用 CSS 旋转过渡

How to apply CSS rotate transition around glyph's vertical middle or centerpoint

javascript

html

css

rotation

glyph