Robię dla klienta pewną aplikację do projektowania kart magnetycznych, w której można na "czystej karcie" (zwykły DIV o określonych wymiarach i borderze) nakładać obrazki i akapity z tekstem oraz je przemieszczać za pomocą jQuery UI draggable. Problem w tym, że klient chce móc obracać tymi elementami. Do ich obracania napisałem prostego plugina, który zmienia właność CSS rotate:
$.fn.rotate = function()
{
return this.each(function(index,element){
if(typeof $(element).attr('data-rotation')=='undefined')
var rotation = 45;
else
var rotation = parseInt($(element).attr('data-rotation'))+45;
if(rotation>=360) rotation=0;
$(element).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
'-moz-transform' : 'rotate('+ rotation +'deg)',
'-ms-transform' : 'rotate('+ rotation +'deg)',
'transform' : 'rotate('+ rotation +'deg)'}).attr('data-rotation',rotation);
});
}
Wszystko byłoby cacy, ale jeśli mamy np. akapit o długości np. 100px i do obrócimy o 90 stopni to nie da się go już dosunąć do prawego rogu "czystej karty"; jest odsunięty od niej właśnie o 100px (bo przeglądarka zdaje się tylko wyświetla akapit obrócony, a w rzeczywistości jest on zwykły, poziomy). Jakieś pomysły jak to obejść? Sprawdziłem kilka pluginów w jQuery do obracania i wszystkie działają na zmianie CSSa.