1

.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.wrapper:hover {
  transform: rotateY(180deg);
  transition: 0.6s;
  backface-visibility: hidden;
}

.wrapper:hover .back {
  display:block;
  transform:rotateY(180deg);
  transition: 3s;
}

.back {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: red;
  transform:rotateY(180deg);
}
  <div class="wrapper">
  <div class="front">
    <img src="http://www.sluniverse.com/200.jpg" alt="">
  </div>
  <div class="back">
    <img src="https://upload.wikimedia.org/wikipedia/en/4/4b/Little_island_colour_logo_200x200.jpg" alt="">
  </div>
</div>

Когда убираешь курсор, анимация не возвращается меняется обратно, да и при самом наведении как-то некорректно отображается.

2 ответа 2

3

У вас есть несколько ошибок:

1) transition у вас проставлен только на :hover. Соответственно, когда вы убираете курсор мыши, он проставляется в значение по умолчанию — ноль. Поэтому и анимации скрытия обратно нет.

2) У вас на .back стоит display: none. Так что даже если анимация скрытия обратно и была бы, то её не было бы видно, потому что .back скрывается сразу после того, как вы убираете курсор; свойство display нельзя анимировать.

3) Вы вращаете .wrapper. Когда он вращается, он может сбежать из-под курсора мыши, из-за чего :hover прекратит работать, анимация отменится и пойдёт обратно — в общем, будет глючить так или иначе в зависимости от браузера.

Если я правильно понял вашу задачу, вы хотите поворачивать некую карточку на 180 градусов при наведении курсора мыши и поворачивать обратно при уведении курсора. С учётом вышенаписанных ошибок я предлагаю такой вариант: никаких display, вращаем только .front и .back, transition прописываем без :hover, а проблемы с пересечением фронта и бэка решаем с помощью backface-visibility: hidden;.

.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.front {
  transform:rotateY(0deg);
  backface-visibility: hidden;
  transition: 0.6s;
}

.wrapper:hover .front {
  transform:rotateY(180deg);
}

.back {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: red;

  transform:rotateY(180deg);
  backface-visibility: hidden;
  transition: 0.6s;
}

.wrapper:hover .back {
  transform:rotateY(360deg);
}
<div class="wrapper">
  <div class="front">
    <img src="http://www.sluniverse.com/200.jpg" alt="">
  </div>
  <div class="back">
    <img src="https://upload.wikimedia.org/wikipedia/en/4/4b/Little_island_colour_logo_200x200.jpg" alt="">
  </div>
</div>

1

.wrapper {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.wrapper-inner {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.wrapper:hover .wrapper-inner,
.back {
  transform: rotateY(180deg);
}
<div class="wrapper">
  <div class="wrapper-inner">
    <div class="front">
      <img src="http://www.sluniverse.com/200.jpg" alt="">
    </div>
    <div class="back">
      <img src="https://upload.wikimedia.org/wikipedia/en/4/4b/Little_island_colour_logo_200x200.jpg" alt="">
    </div>
  </div>
</div>

2
  • Справа появляется скролл
    – uzi_no_uzi
    27 дек 2017 в 12:35
  • @uzi_no_uzi просто perspective уберите (но с ним красивее :)
    – andreymal
    27 дек 2017 в 12:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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