jQuery -webkit-transform yAngle

Question

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?

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

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

Answer 1

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

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

Answer 2

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

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

Or, to affect all of them use a .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.

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

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

You can test it here .

Answer 3

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

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