我想将DIV旋转到一定程度.在FF中它起作用但在IE中我遇到了问题.
例如,在以下样式中,我可以将rotation = 1设置为4
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
Run Code Online (Sandbox Code Playgroud)
这意味着DIV将旋转到90度或180度或270度或360度.但是如果我需要将DIV旋转仅20度,那么它就不再起作用了.
我怎么能在IE中解决这个问题?
是否可以使用Javascript&NOT使用HTML 5旋转div元素?
如果是这样,我设置/更改元素的哪些属性以使其旋转?即,div.什么?
PS:当我说旋转时,我的意思是围绕一个轴旋转一个imagae,而不是每隔x毫秒显示一个不同的图像旋转.
鼠标悬停时,我需要在150ms的间隔内逆时针旋转一个元素180˚,然后在鼠标移出时我需要将元素逆时针旋转回原来的0˚超过150ms.
我愿意使用CSS3,jQuery和JavaScript.
我使用Chrome,但我还需要让它适用于Firefox和Safari.不太担心IE.
我使用CSS3规则"旋转"来旋转div包含文本.你可以在这里看到这个页面:http://vitaminjdesign.com/v2/socialmedia.html.我正在寻找跨浏览器支持旋转div; 但是,这个CSS3规则不适用于IE.是否有一个jQuery选项或其他JavaScript解决方案将产生相同的结果,具有跨浏览器兼容性?
我正在尝试在IE8中旋转文本.根据这个答案,应该可以旋转一个元素,如下例所示:
<!DOCTYPE html>
<html>
<head>
<style>
#enclosing {
width: 20px;
height: 100px;
border: 1px solid;
}
#rotated {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')";
width: 100px;
}
</style>
</head>
<body>
<div id="enclosing">
<p id="rotated">rotated</p>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
(从这台发电机获得数字)
如果我使用开发工具检查p元素,我可以看到它以某种方式受到影响,因为显示所选元素的蓝色边框正确旋转(但实际元素未旋转),请参见下图.

编辑: 为了澄清,这是它没有filter语句的样子:

基本上试图展示一系列类似于扑克牌或塔罗牌的牌,每张牌都有一面独特的图片或图像,另一面有文字说明.
加载页面时,图像将首先显示,但单击按钮时,卡片将翻转180度以显示卡片/图像的文本说明.
因此,我想这是一个在3d中翻转图像同时揭示背后的div的问题.看看Cycle插件但不确定它是什么需要.
任何想法?
是否有跨浏览器方法将文本从水平旋转到垂直?
我需要在图表中添加标签.当然我可以使用图像,但在我这样做之前,我想我会问其他选择.
谢谢
首先我看到 在jQuery中旋转一个Div元素, 但它没有给我我希望的解决方案.
我有一个带有可拖动div的div.
所以在divs sleep中有一个div(bord)和div(class sleep)的图像是缩放到div的100%宽度和高度(保持纵横比)的图像.
div是可调整大小和可拖动的.
我希望图像(div)能够与右上角的处理程序一起旋转,就像在右下角调整大小一样.
目前,在div板中的1个html图像看起来像.
<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>
Run Code Online (Sandbox Code Playgroud)
可拖动/可调整大小的项目的Jquery
.draggable({stack: ".sleep", containment: '#bord' })
.resizable
({containment:'#bord',aspectRatio: true})
.css({position: 'absolute'})
Run Code Online (Sandbox Code Playgroud)
我想让它在每个浏览器中都可以旋转.
有人能以正确的方式帮助我吗?
编辑更清晰的问题:
我希望丢弃的div可以在这个网站上旋转:http://mydeco.floorplanner.com/rooms/moodboard/
我正在制作看起来像那个网站的东西:我有可以删除图像的div.
在下降之后,我希望它们可以与处理程序一起旋转.
我已经使div可以调整大小和可拖动.见上面的代码.
但是我没有想法在哪里开始可以转动为什么我发布了这个问题.
我没有举例说明我不知道从哪里开始.

我做了一个测试页面,我有点吵闹,但它不能正常工作.
您可以单击左侧的其中一个图像.
然后他们标有白色边框然后点击
Omhoog Rechts Omlaag链接改变方向.但我希望他们转向处理程序而不是按钮.
有超过600行代码,其中大多数是php和jquery我试图制作一个小提琴,但它的代码很多.所有jquery都可以在源代码中查看.
可能重复:
在jQuery中旋转Div元素
如何使用jQuery将DIV和内部所有元素旋转到一定程度?喜欢而不仅仅是90,180等.我可以将它设置为88.