使用 jQuery 对 CSS 变换进行动画处理

我正在尝试为 div 制作动画，并让它绕 y 轴旋转 180 度。当我调用以下代码时，出现 jQuery 错误：

$("#my_div").animate({
       "transform": "rotateY(180deg)",
       "-webkit-transform": "rotateY(180deg)",
       "-moz-transform": "rotateY(180deg)"
    }, 500, function() {
        // Callback stuff here
    });
});

它说“未捕获的类型错误：无法读取未定义的属性‘defaultView’”并说它在 jQuery 文件本身中......我做错了什么？

您还可以在 CSS 类中预定义旋转并使用 jQuery 添加/删除该类：

CSS:

#my_div {
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.rotate {
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery:

$("#my_div").addClass('rotate');