Как анимировать искривление элемента по кривой с движением?

Question

[DotDash]

Добрый, допустим, у нас есть такой объект:



Стол с принтером статичны, а печатающийся лист выезжает и изгибается как на картинке.
Как можно сделать такой эффект средствами CSS3 ?

Comments

[Rustam Bainazarov]

Допустим, нифига у вас запросы.

Это возможно сделать только если городить огород из кучи div'ов, кучи наложений, смещений, совмещений и т. п. И результат будет далеко не идеален.

А уж анимирование этого монстра — задача, достойная похвалы и премии.

[Rustam Bainazarov]

CSS — не 3D-движок. Вам тут нужен WebGL да canvas. С их помощью в разы легче сделать.

[Rustam Bainazarov]

Ну ещё можно сделать лютый скрипт, который будет работать на transform: matrix3d(). И это только в теории.

[DotDash]

SmthTo, спасибо, подумал, может есть какой-то плагин, который был бы проще webgl библиотек, но видимо, в данном варианте лучше использовать старый метод с гифками и подстановкой.

Answer 1

[RAX7]

На css такое делать весело, но не практично. Лучше поищи какой-нибудь 3d движок на js как советует SmthTo
Например на threejs можно хоть чайники с текстурами крутить https://threejs.org/examples/#webgl_materials_nodes

Comments

[DotDash]

Спасибо, до threejs всё никак руки не дойдут.
Картинка, конечно, дико искажается

[Rustam Bainazarov]

Ах-аха-аха :))

[skuvaWeb]

Я думал меня сложно удивить возможностями css, но это просто афигенно, парень!)

[Rustam Bainazarov]

skuvaWeb, смотри, что ещё есть :))

https://codepen.io/thebabydino/details/vpyPmN
https://codepen.io/thebabydino/pen/LNEbOz

Ни строки JS.

[Дмитрий Гормаш]

Браво!