CSS – Вращение картинок внутри контейнера так, чтобы они не выходили за края

Посмотрите внимательно, центральная картинка смещена css-свойством transform, но при этом находится в пределах своего контейнера (соседние картинки аналогичного размера). В данной статье научимся применять такие эффекты. Дополнительно, зададим вращение соседних картинок в разные стороны

Итак, воссоздадим разметку для картинок, как на скриншоте выше:

<section>
     <figure><img src="1.jpg" /></figure>
     <figure><img src="1.jpg" /></figure>
     <figure><img src="1.jpg" /></figure>
</section>

Ну тут все предельно просто. Создаем секцию и помещаем картинку в контейнер тегом figure. Все, что остается, это применить несколько правил на CSS:

figure{
       /*размеры у каждого свои*/
    overflow: hidden; /*все, что заходит за границы - не показывать*/
}
figure img{
    max-width: 100%;
    text-align: center;
}
figure:nth-of-type(1) img:hover,
figure:nth-of-type(3) img:hover{
    transition:.5s;
    transform: scale(1.25) rotate(-7deg);
}
figure:nth-of-type(2) img:hover{
    transition:.5s;
    transform: scale(1.25) rotate(+7deg);
}