Анимация с помощью z-index?

Question

[TipTop89]

При наведении на квадрат, остальные меняют свое положение с помощью z-index. Подскажите как сделать изменения положения квадратов плавным? Спасибо

Comments

[WbICHA]

Как ты себе в принципе представляешь плавное изменение z-index?

Answer 1

[RAX7]

Плавное изменение z-index (даже если такое и было бы возможно) тебе ничем не поможет, т.к. z-index указывает лишь порядок отрисовки элементов. Пока один элемент выше остальных он отбрасывает тень на соседние элементы, а соседние элементы не оказывают на него никого влияния. Но как только он оказывается ниже (за счет изменения z-index или transform: traslatez) тень с соседних элементов пропадает и он сам оказывается затенен соседями. Чтобы избавится от этого резного перехода нужно разделить блок на слой с элементами и слой с тенями и анимировать изменение тени.

Comments

[TipTop89]

такой еще к вам вопрос, не подскажите как сделать так, что-бы если наводишь на 1, на 3 тоже box-shadow появлялся? Пытался сделать так, но не применяется анимация, в js я не особо силен. Спасибо

[RAX7]

TipTop89, обновил демку.

[TipTop89]

RAX7, спасибо большое, очень помогли)