Как сделать анимацию вращения буквы?

Question

[Надим]

Как заставить вращаться символ / букву строго по его геометрическому центру? Сейчас вращение кривое:

Comments

[Максим]

tranform-origin: center наверно

[Надим]

Максим Ленский, точно нет.

[Максим]

Надим Закиров,

.eactive::before {
  display: inline-block;
  animation: rotating 2s linear infinite;
  content: "";
  margin-right: 5px;
  vertical-align: middle;
}

[Надим]

Максим Ленский, нет, не работает. Да и это же не таблица, чтобы valign сработал.

[Надим]

Максим Ленский, у вас вращение кривое, не по геометрическому центру символа, разве не видите?

[Максим]

Надим Закиров, точно

[Максим]

Надим Закиров, transform-origin: 50% 55%;

[Надим]

Максим Ленский, еще хуже стало выглядеть)

[Максим]

Надим Закиров, у точно по центру вертикально и горизонтально

[Надим]

Максим Ленский, хз, но у меня нет, значит решение не универсальное.

[Rustam Bainazarov]

Надим Закиров, она крутится идеально по центру. Из-за визуальных несоответствий самой иконки визуально получается неровно. Во-первых, иконку из шрифта следует заменить на картинку, чтобы она была всегда одинаковой, во-вторых, нужно подобрать иконку, которая была бы основана на круге, а не на эллипсе, в-третьих, нужно задать квадратные размеры блоку (не обязательно) и выровнять иконку внутри него.

Ну а так, сейчас можно задать по-быстрому так:

.eactive::before {
    display: inline-block;
    animation: rotating 2s linear infinite;
    content: "";
    margin-right: 5px;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

Но это всё равно будет не очень ровно из-за того, что это шрифт.

[Надим]

Рустам Байназаров, с картинкой любой дурак может, так у картинки высота и ширина равны, проблем с ним нет. Мне интересно сделать именно с символом. Сейчас не у компа, позже проверю.

[Rustam Bainazarov]

Надим Закиров, ну а вот если вы замените на нормальную иконку, то всё будет нормально:

[Rustam Bainazarov]

Надим Закиров, любой дурак может, конечно, но почему-то не вы, LOL. Дело не в ширине и высоте. Неравносторонний прямоугольник в CSS тоже идеально крутиться по своей оси. Проблема в самой шрифтовой природе символа.

Если символ визуально неровный, его форма эллипсоидная, если у шрифта есть внутренняя высота строки (не CCS с его line-height) и её влияние на выравнивание, которое нужно подбирать на глаз, а ещё есть внутреннее выравнивание символа, которое может отличаться от его бокса и не контролируется CSS, — то у вас остаётся только ручной подбор параметров, которые к тому же будут варьироваться от движка к движку.

Будучи вписанным в квадрат, будучи со сброшенной высотой строки CSS, будучи выравненным — данный конкретный символ всё равно имеет смещение, потому что шрифт такой:

[Надим]

Рустам Байназаров, и все же, я заморочусь, но найду способ закрутить именно символ, а не картинку. При этом закрутить ровно везде.

Раньше всегда svg юзал, но вот сегодня что-то захотелось заставить вращаться именно символ.

[Rustam Bainazarov]

Надим Закиров, вы не найдёте его, если не сделаете/найдёте шрифт с идеально вписанными символами, как это делал я в своё время. А ещё, не используя какой-то конкретный шрифт, вы не учитываете того, что шрифты в системах разные, не говоря уже о движках браузеров.

Эта проблема ой как не нова.

[Надим]

Рустам Байназаров, и все же я попробую. Можно же символ поместить в таблицу и вращать уже саму таблицу? Я еще не знаю, будет работать это или нет, но как буду к компа первым делом проверю это.

[Rustam Bainazarov]

Надим Закиров, а что даст таблица? Она не исправит недостатки самого файла шрифта. Кроме того, transform + table — корявая штука (подлагивает).



В любом случае, если у вас что-нибудь получится, то напишите мне, пожалуйста.

[Надим]

Рустам Байназаров, увы, никак. Проблема именно в соотношение сторон, у букв они не равны. Вполне можно обеспечить ровное вращение, если запихнуть символ в таблицу с одинаковой шириной и высотой + вертикальным выравниванием по центру, а затем вращать уже таблицу, но к сожалению такую таблицу не получится разместить в один ряд со строкой текста. Похоже придется использовать картинки.

[Rustam Bainazarov]

Надим Закиров, а зачем таблица, когда есть flex? Да, я знаю, что они не равны, об этом писал выше. Есть внутренняя высота строки, предназначенная для надстрочных и подстрочных элементов, не говоря уже о неидеальности вписанности в бокс глифа.

И таблицу можно спокойно разместить в один ряд со строкой текста, если использовать inline-table или внутри flex-родителя.

Более того, в примере выше я разместил таблицу рядом с текстом в одну строку, чтобы показать, что это не изменит ситуацию:


P. S. Использовать таблицы для выравнивания по горизонтали и вертикали нельзя уже лет как 8.

[Надим]

Рустам Байназаров, не-не, я имел в виду реальную таблицу. Таблица в виде псевдоэлемента неполноценна в ней не будет работать вертикальное выравнивание. Насчет того, что использовать таблицу для выравнивания нельзя... видимо я мамонт) Очень часто использую таблицы, чтобы отцентрировать контент четко по центру страницы.

[Rustam Bainazarov]

Надим Закиров.

Таблица в виде псевдоэлемента неполноценна в ней не будет работать вертикальное выравнивание.

Можно:

Очень часто использую таблицы, чтобы отцентрировать контент четко по центру страницы.

Это прямиком из 2008-го. Так нельзя. Только если нужна поддержка IE6. Ну или же в письмах.

[Надим]

Рустам Байназаров, воу, я всегда думал что в псевдоэлемение нельзя вертикальное выравнивание дать.

[Rustam Bainazarov]

Надим Закиров, всегда можно было. Но таблицами не стоит вообще ничего делать, кроме таблиц. Вот так нужно выравнивать:

[Надим]

Рустам Байназаров, буду пользоваться, не знал что флексы можно отдельно без флексбоксов внутри применять.

[Rustam Bainazarov]

Надим Закиров, что вы имеете в виду под «флексами отдельно от флекбоксов»?

[Надим]

Рустам Байназаров, я просто привык, что если я создаю блок со стилем flex, то обязательно внутри должны быть дочерние блоки которые я уже могу настраивать как мне удобно. Обычно я на флексах создаю фото-галереи, либо делаю адаптивную сетку для разной информации, которую надо выводит красивыми блоками, для чего-то кроме этого не доводилось использовать флексы.