0

Вот код в котором заключается проблема:

.tile {
  width: 60px;
  height: 60px;
  background-color: blue;
  font-size: 20px;
  transition: transform 1s linear;
}

.tile:hover{
  transform: rotate3d(1, 0, 0, 180deg);
}
<div class="tile">
  Lorem ispun.
</div>

Если навести курсор на квадрат то он перевернется, но при этом и текст в нем тоже. Так не должно быть. Как сделать так что-бы текст с другой стороны div-а был как-бы зеркальным, чтобы после переворота он был в правильной ориентации?

1
  • 1
    Может быть, нужно сперва сделать две стороны "зеркала", предварительно развернув одну из сторон, а потом уже вращать их общий родительский элемент? 28 янв 2022 в 12:42

1 ответ 1

1

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

.tile {
  width: 60px;
  height: 60px;
  background-color: blue;
  font-size: 20px;
  transition: transform 1s linear;
}

.tile:hover {
  transform: rotate3d(1, 0, 0, 180deg);
}
.tile:hover .tile-text:hover {
  transition-delay: 0.5s;
  transform: rotate3d(1, 0, 0, -180deg);
}

.tile-text {
  width: 100%;
  height: 100%;
  transition-delay: 0.5s;
}
    <div class="tile">
      <div class="tile-text">
        Lorem ispun.
      </div>
    </div>

Ваш ответ

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

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