CSS transform, как такое сделать?

Question

[massef]

Приветствую.
Вот что имеется.

Прямоугольник (добавил рамки для наглядности) размеры которого зависят от содержимого, т.е. не заданы. Светло-серый блок это как бы дверца открывающаяся вверх, а темно-серый внизу это как бы тень от неё.
По краям прямоугольника видна рамка, за которую должны немного вылазить края.
У "дверцы" origin top по оси Y, а у тени orign bottom.

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

Вот что у меня вышло jsfiddle.net/v5zc618n/, наведите на блок и увидите проблему.
Подскажите пожалуйста как это правильно делается?

Comments

[s104]

jsfiddle.net/v5zc618n/1
Искажение не линейное, нужно для каждого из направлений задать свою ease функцию и время. Сам не знаю какие именно параметры задать, но, думаю, направление Вам задал.

[massef]

спасибо за идею, буду пробовать

Answer 1

[Кирилл Грачёв]

Вот готовое решение с комментариями

Comments

[massef]

Спасибо, но это не то, я уже находил подобные варианты. Нельзя чтобы слои при искажении выходили за верхние и нижние границы своего родителя, я почему и сделал transform-origin top для верхнего и transform-origin bottom для нижнего, чтобы относительно этих осей происходило искажение.