Как сделать 3d flip эффект?

Question

[lightalex]

Привет
Есть вот такой флип блока: https://codepen.io/lightalex/pen/NvJjZx
Стало интересно можно ли сделать эту карточку "толстой"?
Как добавить блоку объема по Z?
Пока пришло голову только наплодить div'ов и по Z оси их раскидать чтобы получился фейковый объем
Но что-то мне не нравится эта идеи
Может есть какие-нибудь волшебные функции которые позволят тянуть блок по Z?
P.S. Прошу обратить внимание что у карточки скругленные края, что не позволяет добавить три div'а которые создадут 3D фигуру

Answer 1

[gleendo]

Demo (Codepen)

Comments

[lightalex]

Пока пришло голову только наплодить div'ов и по Z оси их раскидать чтобы получился фейковый объем
Но что-то мне не нравится эта идеи

Спасибо за старания, но увы я пытаюсь найти другое решение

[gleendo]

lightalex, мне кажется это единственное решение с помощью css, тем более с закругленными угламм.
как вариант можно сделать при помощи webGL, код будет явно изящнее, но сложнее в реализации

[lightalex]

iamevg_, да, видимо только webGL остается :(
Но глядишь лет через 5 обычным css и по Z можно будет bg растянуть
Спасибо за помощь)

Answer 2

[GreatRash]

https://codepen.io/anon/pen/GveQKd

Comments

[lightalex]

Пока пришло голову только наплодить div'ов и по Z оси их раскидать чтобы получился фейковый объем
Но что-то мне не нравится эта идеи

https://codepen.io/lightalex/pen/prYajz
Спасибо за старания, но увы я пытаюсь найти другое решение