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

Создать эффект пространства, объема на на листе бумаге доступно всем кто «проходил» геометрию в школе. Но как такое «начертить» на экране компьютера до недавнего времени считалось практически невозможным. Но как только как в 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