0

Всем привет! Подскажите, пожалуйста, как сделать анимацию, как на картинке, только при наведении мышки? когда я использую hover, у меня отодвигается только один блок на который наведу, а нужно, чтобы при наведении мыши на любой из блоков отодвигались оба. https://i.stack.imgur.com/LKf5j.png

https://stackoverflow.com/image.jpg[![пример решения задачи][2]][2]

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 8 янв 2022 в 12:03

1 ответ 1

2

Пример

* {
  box-sizing: border-box;
}

.block {
  height: 200px;
  border: 2px solid #000;
  position: relative;
  max-width: 600px;
  margin: 2em auto;
  perspective: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block::before {
  content: 'Hello';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.block:hover .block__item:nth-of-type(1) {
  transform: rotateY(60deg) scale(.5);
}

.block:hover .block__item:nth-of-type(2) {
  transform: rotateY(-60deg) scale(.5);
}

.block__item {
  position: absolute;
  top: 0;
  background-color: #f00;
  width: 50%;
  height: 100%;
  border: 2px solid #000;
  transition: transform .3s ease;
  z-index: 1;
}

.block__item:nth-of-type(1) {
  left: 0;
}

.block__item:nth-of-type(2) {
  right: 0;
}
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

2
  • Спасибо большое
    – Ahmed_08
    8 янв 2022 в 13:17
  • @Ahmed_08 вы можете добавить свойство transform-origin, чтобы установить положение оси вращения дверок (Y) — сейчас они как будто слетают с петель при открытии. При этом scale можно заменить на scaleX. 10 янв 2022 в 12:02

Ваш ответ

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

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