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 that you have read and understand our privacy policy and code of conduct.

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