javascript jQuery -webkit-transform yAngle

jQuery -webkit-transform yAngle

提问by mcbeav

Just as a learning experience, I am trying to make en element rotate on its yAxis upon clicking a link, but I am having no luck. Here is the code I am using. Any ideas?

作为一种学习经验，我试图在单击链接时使 en 元素在其 yAxis 上旋转，但我没有运气。这是我正在使用的代码。有任何想法吗？

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

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

回答by Matt Ball

That's not how you apply CSS styles with jQuery. This is.

这不是您使用 jQuery 应用 CSS 样式的方式。这是。

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

回答by Nick Craver

.styleisn't a jQuery object property, if you wanted to affect one, use [0]like this:

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

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

Or, to affect all of them use a .each():

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

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

Note that your selectors 'rotate'and 'object'are looking for <rotate>and <object>elements...so you'll want to adjust those selectors accordingly, above I'm looking for class="rotate"for the click, etc.

请注意，您的选择器'rotate'和'object'正在寻找<rotate>和<object>元素...所以您需要相应地调整这些选择器，上面我正在寻找class="rotate"点击等。

An alternative more jQuery-ish way (debatable for custom properties) is .css(), like this:

另一种更 jQuery 风格的方式（对于自定义属性有争议）是.css()，像这样：

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

You can test it here.

你可以在这里测试它。

回答by puppybits

The QTransform jQuery plugin extends jQuery's css to include setting css Transforms. You can write: $('object').rotate('30deg'); or animate with $('object').animate({rotate:'+=30deg', 1000});

QTransform jQuery 插件扩展了 jQuery 的 css 以包括设置 css Transforms。你可以写： $('object').rotate('30deg'); 或使用 $('object').animate({rotate:'+=30deg', 1000});

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

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