CSS: преобразование масштаба с абсолютным положением - PullRequest
Новая
       8

CSS: преобразование масштаба с абсолютным положением

0 голосов
/ 24 апреля 2018

У меня небольшая проблема с положением: абсолютное. Позвольте мне объяснить.

enter image description here

После наведения у меня что-то вроде этого:

enter image description here

Код CSS: 

.option {
    width: 50px;
    height: 50px;
    box-shadow: 1px 1px 1px 1px  #888;
}

.option:hover {
    transform: scale(2.25, 2.25);
    transition-duration: 0.01s;
    z-index:10;
    position: absolute;
}

Я использовал transform: scale, чтобы увеличить элемент после наведения на опцию. Однако для достижения желаемого эффекта мне нужно добавить атрибут position: absolute - при этом опция выходит из div после наведения. Hover работает нормально, но остальные 3 опции остаются влево - есть ли способ это исправить? Я хочу по-прежнему отображать 4 параметра после наведения, а не обрезать остальные.

Без position:absolute элемент не выходит из деления.

enter image description here

1 Ответ

0 голосов
/ 24 апреля 2018

Используя transform-origin, вы можете избавиться от необходимости использовать абсолютное позиционирование. Переместите начало преобразования из значения по умолчанию (center) в верхний левый угол (0 0): 

.option {
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 1px 1px #888;
  display: inline-block;
}

.option:hover {
  transform: scale(2.25, 2.25);
  transition-duration: 0.01s;
  z-index: 1;
  transform-origin: top left;
}
<div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
</div>
...