在 jQuery 中转换

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);

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

JSFiddle 链接

Answer 1

如果您使用 jquery，jquery.transit 是非常简单且功能强大的库，它允许您进行转换，同时为您处理跨浏览器兼容性。
它可以像这样简单：$("#element").transition({x:'90px'})。从此链接获取：http://ricostacruz.com/jquery.transit/

Answer 2

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

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

Answer 3

除了 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/

（我知道这不是您想要的所有属性，但您明白了！如果您还想更改高度，则需要设置这将原点变换到正确的位置）。

在 IE9 中，旋转时不会有动画，而在较旧的浏览器中则不会发生任何情况。您可以修改 IE 的过滤器，以便在真正旧的 IE 中进行轮换。

Answer 4

使用优秀的 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 spin
其中 #myImage 是要旋转的元素的 id。

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

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

Answer 5

跨浏览器应用 CSS 转换的最佳 jquery 插件是 jquery transform。
它还可以制作动画，并且可以在 Github 上找到，并附有详细的文档。

Answer 6

可能这篇文章有点过时了，但你不需要额外的插件（这是如果你不希望支持 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，我没有测试 IE，但它应该可以在 IE9 及更高版本中工作。

Answer 7

jQuery animate 不支持旋转（请参阅 http://bugs.jquery.com/ticket/4171 和 jQuery 文档)

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

Answer 8

如果你想在 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 9

我用这个来衡量：

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 + ')'
    });
});