jQuery -webkit-transform yAngle

Question

Так же, как опыт обучения, я пытаюсь заставить элемент вращаться по оси Y при нажатии на ссылку, но мне не повезло. Вот код, который я использую. Есть идеи?

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

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

Answer 1

Это не то, как вы применяете стили CSS с помощью jQuery. Это .

$('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' ищут элементы <rotate> и <object> ... так что вы захотите соответственно настроить эти селекторы, выше я ищу class="rotate" для нажмите и т. д.

Альтернативный способ более jQuery-ish (спорный для пользовательских свойств): .css(), например:

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

Вы можете проверить это здесь .

Answer 3

Плагин QTransform jQuery расширяет css в jQuery и включает настройку css Transforms.Вы можете написать: $ ('object'). Rotate ('30deg');или animate с помощью $ ('object'). animate ({rotate: '+ = 30deg', 1000});

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