Как справиться с прыжками при transform scale?

Question

[drtvader]

Привет!
При ховере работает transform: scale и текст внутри блока начинает прыгать при анимации, как такое предотвратить?

https://jsfiddle.net/drtvader/9mxn4x36/

Answer 1

[VoidVolker]

Вообще-то текст не прыгает, а тоже увеличивается, ведь это трансформация всего блока вместе с содержимым. В данном случае, если не хочется изменять размер текста, то следует изменять размер блока:
https://jsfiddle.net/o3sjsmhk/

Comments

[drtvader]

а через scale никак нельзя?

[VoidVolker]

Что нельзя?

[drtvader]

VoidVolker: ну т.е. без изменения размеров блока при ховере, а только через transform scale?

[VoidVolker]

Еще раз, что именно нельзя? В чем вопрос-то? scale - это фильтр, который тупо увеличивает элемент вместе со всем его содержимым. Если текст не надо увеличивать - то и не надо к нему применять этот фильтр. Либо, наложить текст отдельным слоем. Но зачем, когда задача стоит просто увеличить диаметр круга и это можно легко сделать - зачем усложнять-то все?

[drtvader]

VoidVolker: можно ли каким-то образом при изменении внешнего блока? потому что вашим методом, он расширяется влево-вниз. Конкретно в проекте. У родительского блока fixed стоит.

[VoidVolker]

В примере на фиддле он увеличивается во все 4 стороны - уменьшение отступов компенсирует сдвиг всего элемента, т.е., итоговый размер элемента не меняется.