Сегодня мы хотели бы поделиться с вами некоторыми вдохновляющими идеями для организации простого эффекта стека. Вы, вероятно, уже видели такого рода эффект, в основном он используется в фотогалереях, но и на отдельных элементах  страницы его тоже можно заметить: один элемент показан изначально, а затем, скажем по клику на видимый элемент, появляются ещё элементы, как правило, это используется в качестве украшения. При творческом подходе вы можем сделать некоторые интересные эффекты, которые оживят статический дизайн.

Обратите внимание, что для некоторых эффектов  мы используем perspective и 3D transforms, так что они будут работать только в современных браузерах.

Красивые иллюстрации от Исаака Монтемайора. Посетите его Dribbble профиль, он удивительный иллюстратор.

Разметка следующая:

<figure class="stack stack-sidegrid">
    <img src="img/1.png" alt="img01"/>
    <img src="img/3.png" alt="img03"/>
    <img src="img/4.png" alt="img04"/>
    <img src="img/2.png" alt="img02"/>
</figure>

Мы используем figure с тремя или четырьмя изображениями.

Все изображения, за исключением последнего, будет иметь абсолютное позиционирование:

.stack {
    margin: 20px auto;
    width: 400px;
    padding: 0;
    position: relative;
    max-width: 100%;
}
 
.stack img {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}
 
.stack img:last-child {
    position: relative;
}

Установка относительного позиционирования для последнего изображения даст нашему figure высоту.

Пример эффект состоит в следующем:

/* Bouncy Grid */
.stack-bouncygrid.active img {
    transform: scale(0.48);
}
 
.stack-bouncygrid.active img:nth-child(4) {
    transform-origin: 0 0;
}
 
.stack-bouncygrid.active img:nth-child(3) {
    transform-origin: 100% 0;
}
 
.stack-bouncygrid.active img:nth-child(2) {
    transform-origin: 0 100%;
}
 
.stack-bouncygrid.active img:first-child {
    transform-origin: 100% 100%;
}

Этот эффект перемещает элементы по углам и масштабирует их.

Перевод: Art

Оригинал: tympanus.net

Демо тут, исходники тут.