Блог

Главная - Вопросы по программированию - Применить масштаб к текущему анимированному растровому изображению CSS?

Применить масштаб к текущему анимированному растровому изображению CSS?

#css #bitmap

#css #растровое изображение

Вопрос:

У меня есть растровое изображение с применяемым стилем анимации, который вращает его до бесконечности. Я бы хотел, чтобы он перемещался влево и изменял размер примерно на 50% при срабатывании события (в данном случае наведите курсор). Я смог плавно применить движение влево, но я не получаю ответа с помощью команды transform: scale . Смотрите jsfiddle здесь .

 .wheel:hover {
    margin-left: -228px;
    transform: scale(0.5);
}

Что я делаю не так?

Ответ №1:

это не работает, потому что у вас есть transform:rotate() изображение из анимации. и добавление другого transform к тому же изображению в то же время, когда анимация работает, невозможно

вместо transform:scale(0.5) этого вы можете использовать height:50%;width:auto . см. Фрагмент ниже или скрипку> jsFiddle

дайте мне знать, если это поможет

 @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.wheel {
	position: fixed; 
	top: 30px;
	left: 140px; 
	animation: spin 15s infinite linear;
	transition: all 0.5s linear;
}

.wheel:hover {
	margin-left: -228px;
 width:auto;
 height:50%;
}  
 <body>
  <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" class="wheel">
</body>

Комментарии:

1. Да, это работает. К сожалению, плавный переход, как в методе масштабирования, теряется. Странно то, что установка высоты на «50%» в firefox фактически удваивает размер изображения. Установка его на 35% выполняет свою работу. Большое спасибо.

2. @pacotanaka рад, что смог помочь. не забудьте оценить мой ответ как принятый: D