Как применить переход поворота CSS вокруг вертикальной середины или центральной точки глифа

У меня есть скрытая панель, которая находится за пределами экрана до тех пор, пока не будет нажата 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>


javascript html css rotation glyph
person Alex Reynolds    schedule 27.08.2015    source источник
comment
У меня не работает в IE, потому что вы не включили свойства transition и transform без префикса...   -  person Niet the Dark Absol    schedule 28.08.2015
comment
Меня в основном интересуют браузеры, поддерживающие текущие стандарты.   -  person Alex Reynolds    schedule 28.08.2015
comment
Итак, вы хотите поддерживать текущие стандарты, но используете устаревшие префиксы поставщиков. Ммм, имеет смысл. Вы имеете в виду то, что у вас предвзятое отношение к IE, потому что вы не трогали его со времен IE6 и предполагаете, что он все еще такой же дерьмовый, как и тогда. Поверьте, это нет.   -  person Niet the Dark Absol    schedule 28.08.2015

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете добиться этого, установив css propertytransform-origin: 50% 50%, это обеспечит преобразование вокруг центра элемента. Я надеюсь, что это работает.

person Ankit Agarwal    schedule 28.08.2015
comment
Спасибо за помощь — с некоторой настройкой y-процента это сработало лучше. - person Alex Reynolds; 28.08.2015

arrow_upward
1
arrow_downward

Просто: не используйте глиф, когда вам нужна иконка.

Значок можно очень легко сделать осесимметричным, чтобы при переворачивании он не «двигался вверх».

Чтобы точно понять, почему ваш «x» несимметричен, проверьте это:

.x {
  display: inline-block;
  background: pink;
}
.flipped {
  transform: rotate(180deg);
}
<div class="x">x</div>
<div class="x flipped">x</div>

person Niet the Dark Absol    schedule 27.08.2015
comment
Я ищу ответ, в котором используются глифы (в конечном счете, шрифты значков). - person Alex Reynolds; 28.08.2015
comment
Затем убедитесь, что они осесимметричны. x нет, как вы можете ясно видеть. - person Niet the Dark Absol; 28.08.2015