Анимация кадрирования фото

Nikita
WebbDEV
Published in
1 min readMay 30, 2019

--

До CSS3 обрезать изображения было очень непросто, если помните. Но теперь у нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

Конечно, всегда можно обрезать изображение в редакторе, но благодаря CSS инструментам мы можем все это дело анимировать.

В примере вы можете запустить этот эффект с помощью чекбокса: он привязан к псевдоклассу :checked.

--

--