Макс Кузнецов

Я не верстальщик, но опыт в вебе есть. Такое обычно верстается путем наложения «маски» в форме параллелограмма поверх картинки, а не путем вписывания картинки внутрь параллелограмма.
p.s^ еще вам нужно ограничить ширину и высоту фотки, чтобы ее было видно всю, а не часть. Но ограничить с запасом, вдруг фотка будет больше в высоту, а не в ширину?

Может быть, достаточно проверять положение мыши во время отпускания кусочка паззла? Смотрим, попадают ли координаты курсора мыши внутрь фигуры или нет. Потом сверяем id'шники у фигуры плейсхолдера и у перетаскиваемой фигуры (их нужно будет раздать заранее). Если id совпадают, то значит мы опустили нужный кусок на нужное место. Как вам такой вариант?

А почему бы и нет?

Вот вы и ответили на свой вопрос — сохраняйте первоначальные данные в скрытые инпуты. Можно, конечно, и на серверной стороне проверять изменения, но зачем производить лишнюю нагрузку на сервер, правильно?

Если обновлять данные со скоростью 50-100мс, то у пользователя в глазах будет лишь рябь. Логично, что обновление лучше производить не чаще 1 раза в секунду.
Браузер должен нормально рендерить эти запросы, ведь вы будете обновлять не всю страницу, а только блоки с цифрами (кстати, не забудьте указать им position: absolute, иначе обновляться будет вся страница). WebSockets пока ненадежны. Их то включают в стандарт, то исключают, т.е. нет никакой уверенности, что с обновлением браузера их поодержка не пропадёт.
Поэтому остается поллинг. Или вообще сделайте на java/flash'e, где есть нормальная поддержка нормальных сокетов.

Что значит съезжает? До поворота все как надо отображает?
Угол, от которого rotate() делаете, так считаете: 60 градусов = Math.PI / 3?