Почему некорректно может работать transform?

Question

[Capitan_S]

Указал поворот текста на 45deg при наведении на его родительский тег. Текст повернулся, но после окончании трансформации вернулся в исходное положение, хотя курсор не был отведен. При отводе мышки проигралась трансформацию обратно. Подскажите, пожалуйста, в чём может быть ошибка.

.icon-text {
    -webkit-transition: -webkit-transform 2s; 
    transition: transform 2s;
}

.parent:hover .icon-text {
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
}

Answer 1

[Capitan_S]

Ответ нашелся.
Текст надо сделать display: inline-block;

Answer 2

[Денис Инешин]

Укажите базовое состояние, без ховера, т.е.

.parent .icon-text {
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg);
}

Comments

[Capitan_S]

Не помогает. А вот если я поворачиваю не текст, а родительский блок, то все в порядке, он поворачивается и остается в этом положении пока не уберу мышку.

Answer 3

[Матвей Мамонов]

Потому что в hover transition не нужно снова указывать.