Как наклонить и повернуть объект с помощью CSS сделать его объемным?

Question

[ruslan2243]

Помогите сверстать как на картинке joxi.ru/zANyZXdU51eE29
Нужно как-то наклонить и развернуть блок, скруглить края, а снизу добавить нечто, не знаю как это назвать, чтобы блок смотрелся объемным. И тень падала от этого блока.

Буду очень благодарен за информацию, примеры. Может кто-то уже делал нечто подобное.
Что самое интересное - это должно стать частью карусели.
За любые наводки буду весьма признателен.

Answer 1

[Александр Таратин]

jsfiddle.net/QW01_01/7c6jbv5s/1

Comments

[ruslan2243]

немного поправил и почти то что нужно ) jsfiddle.net/7c6jbv5s/2
спасибо!

[ruslan2243]

Но пока ещё не совсем то что нужно. Вот если бы это адаптировать под показ ромбом, чтобы кусочки картинки продолжались по бокам thecodeplayer.com/walkthrough/3d-thumbnail-image-h...

[Nikolay Talanov]

ruslan2243: Для того чтобы "кусочки картинки" показывались по сторонам, надо делать полноценный объемный блок и на этим самые стороны присобачивать картинки через бэкграунд. Единственный вариант, применять для лицевой стоороны бэкграунд, который будет сжирать лишь 90% от оригинала по ширине/высоте в отцентрованном виде, а его вот эти невлезшие "куски" присобачивать на стороны. В общем в еденичном варианте это делается легко, а вот чтобы это дело автоматизировать, надо сделать примерно как я описал (мне сейчас лень такое кодить).

[Александр Таратин]

ruslan2243: jsfiddle.net/QW01_01/7c6jbv5s/3

[ruslan2243]

Александр Таратин: го отдельным комментом, сделаю лучшим ответом)

[ruslan2243]

jsfiddle.net/7c6jbv5s/6

[ruslan2243]

и ещё такой вариантик jsbin.com/fibinidoyi/2/edit?html,css,output