jQuery-webkit-transform yAngle

Question

就像一次学习经历一样，我试图在单击链接时使元素在其 y 轴上旋转，但我没有运气。这是我正在使用的代码。有什么想法吗？

$('rotate').click(function(){

$('object').style.webkitTransform = "rotateY(90deg)";});

Answer 1

这不是通过 jQuery 应用 CSS 样式的方式。 这是。

$('rotate').click(function ()
{
    $('object').css('-webkit-transform', 'rotateY(90deg)');
    // or this:
    // $('object').attr('style', '-webkit-transform: rotateY(90deg)');
});

Answer 2

.style 不是 jQuery 对象属性，如果您想影响其中一个属性，请像这样使用 [0]：

$('.rotate').click(function(){
  $('.object')[0].style.webkitTransform = "rotateY(90deg)";
});

或者，要影响所有属性，请使用 .each()：

$('.rotate').click(function(){
  $('.object').each(function() {
    this.style.webkitTransform = "rotateY(90deg)";
  });
});

请注意，您的选择器'rotate' 和 'object' 正在寻找 和

另一种更 jQuery 的方式（对于自定义属性有争议）是 .css()，如下所示：

$('.rotate').click(function(){
  $('.object').css("webkitTransform", "rotateY(180deg)");
});

您可以在这里测试。

Answer 3

QTransform jQuery 插件扩展了 jQuery 的 css，包括设置 css 变换。你可以写：
$('object').rotate('30deg');
或动画
$('object').animate({旋转:'+=30deg', 1000});

http://plugins.jquery.com/project/QTransform