Make div rotatable in every browser

Question

First i have seen Rotating a Div Element in jQuery but it didnt give me the solution i wished.

I have a div with draggable divs in it.

so 1 main div (bord) with divs in it(class sleep) in the divs sleep are images wich are scaled to 100% width and height of the div(keeping aspect ratio).

THe divs are resizable and draggable.

i want the images (divs) to be able to rotate with a handler on the top right side like with resize on the lower right corner.

At the moment the html of 1 dropped image in the div board looks like.

<div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 125px; top: 46px;">
  <img src="/imgurl.jpg" class="center">
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
</div>

The Jquery for the draggable/resizable items

.draggable({stack: ".sleep", containment: '#bord' })
    .resizable
    ({containment:'#bord',aspectRatio: true})
    .css({position: 'absolute'})

I want to make it rotatable in EVERY BROWSER.

Can some one help me in the right way?

edit more clear question:

I want a dropped div to be rotatable like on this site: http://mydeco.floorplanner.com/rooms/moodboard/

i am making something that looks like that site: i have divs with images wich can be dropped.

After the drop i want them to be rotatable with a handler.

I have made the divs droppable resizable and draggable. see code above.

BUT I HAVE NO IDEA WHERE TO START WITH ROTATABLE THATS WHY I POSTED THE QUESTION.

I DONT HAVE EXAMPLES CAUSE I DONT KNOW WHERE TO START.

I have made a test page were i got a bit ratating but it isnt working good.

You can click on one of the images on the left side.

then they get marked with a white border then click

Omhoog Rechts Omlaag Links to change directions. but i want them to turn around with handlers not buttons.

There are over 600 lines of code most of them php and jquery i tryd to make a fiddle but its to much code. all jquery is viewable in source.

Answer 1

Take a look at the CSS3 transform property, particularly the rotate feature.

According to caniuse the following browsers support CSS3 2d transform's rotate function:

• IE >9
• FF >3
• Chrome >4
• Opera >10
• iOS Safari >3
• Android Browser >2.1
• BB Browser >7
• Opera Mobile >11
• Chrome (for Android)
• Firefox (for Android)

iwanttouse.com aggregates that data and says that 87.44% of all users can use it.

Not sure what your requirements are for browser support, but if you want to perform rotation in IE<9, check out the css rotate property in IE. You'll want to check out useragentman's transforms translator for IE.

Answer 2

Since this was very interesting to me because I know in the future i might need something like this, I did more research than usual and im happy because i found the perfect solution.

Take a look at this JQuery plugin https://github.com/gthmb/jquery-free-transform

This plugin not only allows you to rotate but to free-transform the element, hope you find it helpful.

Answer 3

OK Sven, I have checked the website that you placed as example and they use a library called ExtJS (this is HTML5 ready and thus compatible with all the modern browsers) which has a function to rotate any element Ext.draw.Draw-method-rotate

Now, you said that the solutions presented to you are not compatible with ALL BROWSERS, ok, then combine solutions, in the link that you posted gives solutions that you can combine to make it compatible with ALL BROWSERS(seems like most solutions use CSS so you should be safe there) all you have to do is really make an effort like @Jay Blanchard suggests and start making some code.

Lastly my other solution to you (if you cannot include the ExtJS library to your project) is to use Javascript library called raphaeljs. Element.transform([tstr])

Seems to me that what you can do is attached a handle image to the div, get the position(x,y) of the handle and pass the degree on which the element needs to be rotated.

As far as code goes, I dont have any at the moment but if I get a chance I will come up with something in the next couple of hours or so

Answer 4

Why don't use jQuery UI Rotation plugin : Please visit -> http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ and you can download the plugin by clicking this -> http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip