CSS `transform` + jQuery `scale` – dziwne przesunięcie elementu

Napisałem taki kod w jQuery i CSS:
https://jsfiddle.net/xezvhgor/

Chciałem w nim uzyskać to, żeby ten kwadrat ("square") po naciśnięciu jednego przycisku skracał się i wydłużał (animacja), a po naciśnięciu drugiego przekręcał się o 45 stopni (bez animacji). Pierwsze osiągam za pomocą deklaracji CSS transform: rotate(45deg), a drugie za pomocą funkcji jQuery effect z parametrem scale.

Kwadrat przekręca się normalnie oraz wydłuża i skraca normalnie. Jednak w połączeniu – gdy przekręci się kwadrat o 45 stopni i potem naciśnie przycisk do skracania i wydłużania – kwadrat "przeskakuje" w lewo w górę. Pewnie przeskakiwałby w inną stronę, gdybym przekręcił go o inny kąt.

Jak zrobić, żeby nie przeskakiwał? Nie musi być koniecznie to rozwiązanie, i koniecznie w jQuery i CSS. Liczy się dla mnie, żeby w Javascripcie, ale oczywiście ucieszę się, jeśli ktoś po prostu ulepszy to, co jest.

#echglupiproblem

Podpowiedź - rzuć okiem na https://jsfiddle.net/9yh9mwug/ :)

Dodałem do Twojego kodu mała wskazówkę. Coś świta?

Dziękuję, ale nic nie świta. Ja jestem ciemniak, @cerrato, mnie trzeba prosto. :( Szczególnie, że po tym alercie kwadracik przeskakuje jeszcze dalej (sprawdziłem, ale to też mi niewiele mówi) – co zresztą dziwne. Gdy zrobi się -45deg, kwadracik ląduje ze swoim top na wartości -2.350006103515625px, w czasie animacji na -12.699996948242188 (tam, gdzie Twój alert), a po jej zakończeniu na -19.51666259765625.

Widzę, że się zmienia, ale ja go nie chcę przesuwać! Nie chcę, żeby się sam przesuwał. A nawet jeśli już musi, to dlaczego? Rozwiązania patchworkowe to nie u mnie. <zły>

Nie namawiam do prowizorki, ale raczej staram się naprowadzić Cię na rozwiązanie. A żeby je mieć, musimy zrozumieć dlaczego tak się dzieje (stąd moja podpowiedź z wyświetlaniem wartości top oraz obserwowaniem, jak się zmienia).

Rzuć proszę okiem na:
https://stackoverflow.com/questions/7107964/dynamically-update-transform-origin-of-a-css3-rotated-element-when-modifying-wid
https://stackoverflow.com/questions/25985630/changing-width-height-moves-rotated-element
http://jsbin.com/iqezoj/4/edit?html,js,output
https://stackoverflow.com/questions/7091783/changing-width-height-to-a-css-rotated-div-triggers-top-left-reposition/
http://jsfiddle.net/AqkQb/5/
https://stackoverflow.com/questions/7091783/changing-width-height-to-a-css-rotated-div-triggers-top-left-reposition/

I nie traktuj tego, że mi się nie chce Ci pomóc. Po prostu uważam Cię za ogarniętego kolesia, który po paru poradach/wskazówkach sam dojdzie do rozwiązania. Są tacy, którym trzeba dać jak na tacy gotowe rozwiązanie, ale moim zdaniem Ty dasz sobie radę :)

A tak sobie zrobiłem w ramach zabawy
https://jsfiddle.net/9yh9mwug/3/