Как загнуть уголок анимированного стикера с помощью JS и CSS?

Question

[SamKnight]

Добрый день.

У меня есть картинка в формате PNG(фигура клеющегося стикера). Добавлена на сайт с помощью тега img. Картинка анимирована с помощью библиотеки animate.css(выезжает сбоку на основную картинку как бы приклеивая ее к поверхности(фону). И на этом все. Для полноты эффекта хочется, чтобы край этого стикера отгибался, после приклеивания к фону. Эффект должен быть с тенями. Реально все это сделать? Кто поможет и подскажет?

Comments

[SamKnight]

Спасибо за предложение, но это немного другое. Это старый эффект который построен на работе с цветом блока и тенями. И это не анимация. У меня же стоит задача анимировать png файл.

[Aricus]

У меня не настолько богатое воображение, чтобы правильно вас понять. Нужна картинка, и какой должен быть желаемый эффект "отгибания".

[SamKnight]

Aricus, загнуть смог. Остались тени. Возможно ли положить тень на угол? У меня получилось только на сторону, но это не тот эффект.

[Никита Кит]

SamKnight, можно обернуть img в div, а диву дать before, спозиционировать абсолютно, залить бэкграундом и назначить filter blur