Интересный эффект объёма на экране

Создать эффект пространства, объема на на листе бумаге доступно всем кто “проходил” геометрию в школе. Но как такое “начертить” на экране компьютера до недавнего времени считалось практически невозможным. Но как только как в CSS появилось правило z-индекса, третьей пространственной оси это стало возможным. А с добавлением теней и градиента эффект объема только усилиться.

Итак z-индекс.

Этот эффект знаком каждому кто хоть держал в руках карты. Раскладывая карты по мастям и старшинству, чередуя для удобства “черные” и “красные” масти, для удобства подкладывал одну карты под другую. Да же на  картинке, как “младшие” карты уходят в глубь. Расположение карт веером несколько слаживает эффект обычно достигаемый z – индексом, но в общем и целом наглядно ее демонтирует. И теперь стоит перейти к практическим примерам применения z – индекса.  Заранее следует сказать что для возможности его  использования к блоках,  где  будут находиться  находиться изображения необходимо применить правило “position: relative;”  Итак самый простейший пример – применения z-индекса к пяти квадратным блокам различных оттенков зеленого цвета,

See the Pen
тень1 by Аарон Интман (@aeafjusm)
on CodePen.

Такое расположение блоков обеспечивается прежде всего за счет различных значений z-index. Чем оно меньше, тем блок будет расположен “дальше”- у блока с цифрой 1 минимальное значение z-index:1;. Соответственное у блока с цифрой 5 максимальное для данного примера значение z-index:5; и он расположен “ближе.” Наложение блоков определяют значения внешних отступов – в частности для блоков с цифрой 2 margin: -70px 0px 0px 30px;

для карт https://webcode.tools/generators/css/rotate