5

Я хочу узнать, как сделать вращающееся изображение, когда на него наводится курсор.
Хотелось бы понять, как реализовать эту функциональность с помощью CSS и следующего кода:

img {
  border-radius: 50%;
}
<img src="http://i.imgur.com/3DWAbmN.jpg" />

Свободный перевод вопроса Spin or rotate an image on hover от участника @user3597950.

1

2 ответа 2

9

Вы можете использовать transitions CSS3 для вращения изображения при наведении.

Rotating image :

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
<img src="http://i.imgur.com/3DWAbmN.jpg" />

Ещё пример:

Вращение спирали

введите сюда описание изображения

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

Дополнительная информация и ссылки:

  • Руководство по transitions CSS на MDN
  • Руководство по transforms CSS на MDN
  • Таблица поддержки браузера для 2d-transforms на caniuse.com
  • Таблица поддержки браузера для transitions на caniuse.com

Свободный перевод ответа от участника @web-tiki.

3
  • -webkit уже можно не писать.
    – Qwertiy
    16 мар 2017 в 7:19
  • @Qwertiy этот ответ уже отметили, как дубликат с твоим постом ru.stackoverflow.com/questions/499107/…, но ведь ничего общего нет, кроме слова "вращение" У тебя два текстовых блока, которые подменяют друг друга при вращении вокруг "Y", а у меня в ответе один образ, который вращается вокруг оси "Z" 16 мар 2017 в 7:28
  • @Alexandr_T, если ты был не согласен что это дубликатом, не надо было соглашаться
    – Grundy
    16 мар 2017 в 7:53
3

@keyframes _img {
  0% {
    -webkit-transform: rotateX(-360deg) translateZ(60px) rotateX(360deg);
    transform: rotateX(-360deg) translateZ(60px) rotateX(360deg);
  }
  25% {
    -webkit-transform: rotate(360deg);
    -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
    transform: rotate(360deg);
    filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
  }
  50% {
    -webkit-transform: rotate(0deg);
    -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
    transform: rotate(0deg);
    filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
  }
  100% {
    -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
    transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
  }
}

div {
  border: 1px solid hsla(0, 0%, 100%, 1);
  display: block;
  position: relative;
  width: calc(20vw);
  height: calc(20vw);
  margin: 0% auto;
  background: hsla(0, 0%, 60%, 1);
  box-shadow: inset .75em .75em .75em hsla(0, 0%, 100%, 1), inset -.75em -.75em .75em hsla(0, 0%, 100%, 1);
  perspective: 300px;
  transform-style: preserve-3d;
  transition: all 1s linear 0s;
}

img {
  border-radius: 50%;
  border: 1px solid hsla(0, 0%, 60%, 1);
  position: absolute;
  width: calc(8vw);
  height: calc(8vw);
  top: calc(100%/3 - 3%);
  left: calc(100%/3 - 4%);
  -webkit-filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1));
  -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
  filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1));
  transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
}

div:hover img {
  animation: _img 3s 0s linear;
}
<div>
  <img src="http://i.imgur.com/3DWAbmN.jpg" />
</div>

3
  • у вас не красивое решение , смотрите как ведёт img после hover у автора -ответчика и как происходит выход из hover в вашем случае
    – user33274
    16 мар 2017 в 4:00
  • Не путайте вращающееся изображение с поворотом...
    – Dhunga
    16 мар 2017 в 5:02
  • 1
    По крайней мере выше ответ красивее
    – user33274
    16 мар 2017 в 5:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.