Question

我正在尝试使用jquery获取一个动画旋转悬停效果的元素，我有这个jsFiddle要测试。到目前为止我有这个：

$(".icon").hover(function() {
        $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400);
    },function() {
        $(this).stop().animate({backgroundColor : "black", color: "red"},400);
    });

但它似乎根本没有旋转它，我意识到设置css的正确方法是：

-webkit-transform：rotate（30deg）;

我试过这个：

$(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400);

但即使是高度也没有改变。任何建议都会有所帮助！

Link to the JSFiddle

Answer 1

除了IE9之外，所有支持转换的浏览器也支持转换，所以如果不使用JS，最好不要这样做：

.icon {
    -webkit-transition:all 400ms;   
    -moz-transition:all 400ms;
    transition:all 400ms; 
    display:block;
    width:100px;
    height:100px;
    background-color:red    
}

.icon:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg)
}

示例：http://jsfiddle.net/9CYET/14/

（我知道这不是你想要的所有属性，但是你明白了！如果你想改变高度，你需要将transform-origin设置到正确的位置。）

在没有动画的情况下旋转的IE9，在旧浏览器中不会发生任何事情。您可以使用IE的过滤器来破解真正的旧IE中的旋转。

Answer 2

使用优秀的jQuery Rotate插件。 http://code.google.com/p/jqueryrotate/。它受到所有主流浏览器的支持

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome

要旋转图像，您需要做的就是$('#myImage').rotate(30) //for a 30 degree rotation 其中#myImage是您要旋转的元素的ID。

要设置旋转动画，可以使用setTmeout ex：

setTimeout(function() { $('#myImage').rotate(30) },5)

Answer 3

在浏览器中应用CSS转换的最佳jquery插件是jquery transform。它也可以做动画，available on Github带有详细的文档。

Answer 4

该帖子可能有点过时，但您不需要额外的插件（如果您不希望支持IE 8及以下版本）。我已经按照下一个方式对其进行了整理：

1 ）在HTML的CSS中定义转换时间：

.element {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

然后在您的脚本中执行：

$(".element").css("-webkit-transform", "rotateY(90deg)");
$(".element").css("transform", "rotateY(90deg)");

这对我在Chrome，Firefox和Safari中起作用，我没有测试它，但它应该在IE9及更高版本中运行。

Answer 5

jQuery animate不支持轮换（请参阅http://bugs.jquery.com/ticket/4171和jQuery documentation）

~~此外，动画仅支持具有数值的CSS，这意味着动画颜色也不起作用。~~糟糕，不知道jQuery UI添加了对颜色的支持。

Answer 6

如果你想在css中制作动画，你只需要设置“transitionDuration”css属性（不需要jQuery.animate），例如：

var style = element.style;

style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '500ms';
style.MozTransform = style.webkitTransform = 'translate3d(100px,0,0)';
style.msTransform = style.OTransform = 'translateX(100px)';

然而，这仅适用于现代浏览器，因此您必须使用jQuery.animate作为后备。

这是处理此问题的jQuery插件：

https://github.com/benbarnett/jQuery-Animate-Enhanced

它只是覆盖jQuery.animate函数以使用css动画（如果可用），因此您不必担心跨浏览器问题，只需调用jQuery.animate并调用最佳可用方法。

Answer 7

我用它作比例：

var zoom_level = .4,
    multiplier = .2;
$('button.zoom-in, button.zoom-out').click(function(){
    zoom_level += $(this).hasClass('zoom-in') ? multiplier : -(multiplier);

    $('.floor').css({
        '-webkit-transform': 'scale(' + zoom_level + ')'
    });
});

Answer 8

如果你正在使用jquery，jquery.transit是一个非常简单和强大的lib，它允许你在处理跨浏览器兼容性的同时进行转换。它可以这么简单：$（“＃element”）。transition（{x：'90px'}）。从以下链接中获取：http://ricostacruz.com/jquery.transit/

Answer 9

jquery.transform.js是由Louis remi开发的jquery 2d转换插件。它允许在jquery中使用像css这样的转换。请访问this链接，了解有关如何使用它的一些说明。使用此插件旋转元素的简单说明如下：

$(elem).animate({transform: 'rotate(135deg)'});

在jQuery中转换

9 个答案: