我有一个隐藏的面板，它位于屏幕外，直到单击 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>最佳答案
您可以通过设置 css 属性transform-origin: 50% 50% 来实现它，它将提供围绕元素中心的变换。我希望这能奏效。
关于javascript - 如何围绕字形的垂直中间或中心点应用 CSS 旋转过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32260026/