在每个浏览器中使div可旋转

首先我看到 在jQuery中旋转一个Div元素,但它没有给我我希望的解决方案。

我有一个带有可拖动div的div。

所以在divs sleep中有一个div(bord)和div(class sleep)的图像是缩放到div的100%宽度和高度(保持纵横比)的图像。

div是可resize和可拖动的。

我希望图像(div)能够与右上角的处理程序一起旋转,就像在右下角resize一样。

目前,在div板中的1个html图像看起来像。

可拖动/可resize的项目的Jquery

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

我想让它在每个浏览器中都可以旋转。

有人能以正确的方式帮助我吗?

编辑更清晰的问题:

我希望丢弃的div可以在这个网站上旋转: http : //mydeco.floorplanner.com/rooms/moodboard/

我正在制作看起来像那个网站的东西:我有可以删除图像的div。

在下降后,我希望它们可以与处理程序一起旋转。

我已经使div可以resize和可拖动。 见上面的代码。

但是我没有想法在哪里开始可以转动为什么我发布了这个问题。

我没有举例说明我不知道从哪里开始。

例

我做了一个测试页面,我有点唠叨,但它不能正常工作。

您可以单击左侧的其中一个图像。

然后他们标有白色边框然后点击

Omhoog Rechts Omlaag链接改变方向。 但我希望他们转向处理程序而不是按钮。

有超过600行代码,其中大多数是php和jquery我试图制作一个小提琴,但它的代码很多。 所有jquery都可以在源代码中查看。

因为这对我来说非常有趣,因为我知道将来我可能需要这样的东西,我做了比平时更多的研究,我很高兴,因为我找到了完美的解决方案。

看看这个JQuery插件https://github.com/gthmb/jquery-free-transform

这个插件不仅允许你旋转,而且可以自由变换元素,希望你发现它有用。

看看CSS3转换属性,特别是rotatefunction。

根据caniuse ,以下浏览器支持CSS3 2d变换的旋转function:

  • IE> 9
  • FF> 3
  • Chrome> 4
  • 歌剧> 10
  • iOS Safari> 3
  • Android浏览器> 2.1
  • BB浏览器> 7
  • Opera Mobile> 11
  • Chrome(适用于Android)
  • Firefox(适用于Android)

iwanttouse.com汇总了这些数据,并表示87.44%的用户可以使用它 。

不确定您对浏览器支持的要求是什么,但如果您想在IE <9中执行旋转,请查看IE中的css rotate属性 。 你想要查看用于IE的useragentman的变换翻译器 。

OK Sven,我已经检查了你放置的网站,他们使用了一个名为ExtJS的库(这是HTML5就绪,因此与所有现代浏览器兼容),它具有旋转任何元素的functionExt.draw.Draw-method-回转

现在,您说过呈现给您的解决方案与所有浏览器不兼容,好的,然后结合解决方案,在您发布的链接中提供可以组合的解决方案,使其与所有浏览器兼容(似乎大多数解决方案都使用CSS你应该安全吗)所有你需要做的就是努力做像@Jay Blanchard建议并开始制作一些代码。

最后,我的另一个解决方案(如果你不能将ExtJS库包含到你的项目中)是使用名为raphaeljs的Javascript库。 Element.transform([TSTR])

在我看来,你可以做的是将一个手柄图像附加到div,获得手柄的位置(x,y)并传递元素需要旋转的程度。

就代码而言,我目前没有任何东西,但如果我有机会,我会在接下来的几个小时左右拿出一些东西

为什么不使用jQuery UI Rotation插件:请访问 – > http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ ,你可以点击这个下载插件 – > http:/ /vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip