-webkit-transform Проблемы вращения

Question

Хорошо, я просмотрел практически все записи о ротации на этом сайте и просто не могу решить эту проблему. Прошло 3 дня, чтобы понять это. Скорее всего, это что-то очень простое, но я просто не могу этого понять. Вот проблема: у меня есть 2 изображения, которые имеют элементы управления вращением. Однако, когда я иду повернуть 1, они оба вращаются. Я хочу, чтобы они вращались не одновременно, а сами по себе. Вы можете увидеть это здесь: http://dl.dropbox.com/u/11770605/sample2.html

Вот следующий код для main.js:

    $(document).ready(function(){ $('.cc-element').rotatable(); });

и вот разметка:

    <span id="cc-element-1" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" ><image goes here></span>

Я тоже пробовал:

    $(document).ready(function(){
    $('.cc-element').rotatable();
    $('.cc-element2').rotatable();
    });

и

    <span id="cc-element-2" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" > <image goes here>< /span>

но эта модификация НЕ работала. Пожалуйста, помогите мне, я ДОЛЖЕН исправить это как можно скорее.

Answer 1

Вы выбираете элементы по классу, и они оба имеют один и тот же класс.Измените это так:

$(document).ready(function(){
    $('#cc-element').rotatable();
    $('#cc-element2').rotatable();
    });

Answer 2

Проблема в том, что ваш плагин "rotatable ()" работает с передаваемым ему значением this, которое, когда ваш селектор ".cc-element" будет списком обоих элементов.Таким образом, ваши вызовы к плагину "roll ()" работают со всем списком.

Вам необходимо заключить соответствующий код в этот плагин в итератор "each ()".Что-то вроде:

    $.fn.rotatable = function() {
      return this.each(function() {
        var $this = $(this),
          // ... the rest of the plugin, as it is now ...
      });
    };