Изменение ширины / высоты на повернутый CSS div вызывает перемещение вверх / влево

Question

У меня есть <div>, который повернулся на 66 градусов с -webkit-transform(rotate66).Когда я выполняю изменение размера, ширины или высоты, div, кажется, меняет свои верхние / левые координаты.Фактические свойства CSS left/top не меняются.Я думаю, что в матрице преобразования что-то идет не так.

Есть ли способ заставить повернутый <div> "оставаться на месте" при width/height изменении размера?При изменении размера должна быть применена левая и верхняя опора, чтобы противостоять этому движению, но я не могу найти правильные пропорции.

Вы можете увидеть тест здесь (только Webkit): http://jsbin.com/iqezoj/4/edit

Спасибо

Answer 1

Вам также нужно указать -webkit-transform-origin, чтобы контролировать , где источник преобразования. Документация по Mozilla достаточно хороша в этом вопросе.

Edit -webkit-transform-origin: 100px 50px; перемещает точку в середину <div> в вашем примере. Значением по умолчанию является 50% 50%, которое будет меняться в зависимости от высоты и ширины <div>, что объясняет, почему позиция смещается.