использование CSS3-преобразования: поворот в проблеме с исходным кодом IE

Question

Я работаю над проектом, который использует новую функцию CSS3 transform:rotate(180deg). Каждый современный браузер имеет свой собственный тег, но поддерживает его. Только IE (конечно) нет. Но с помощью фильтров можно добиться того же. Единственная проблема в том, что IE использует другой источник, как CSS3. Я предполагаю, что с некоторой математикой источник можно сделать центрированным, но я просто не понимаю (моя математика т, что раньше).

Код и пример можно найти здесь: http://jsbin.com/adiwa3/2. Добавление /edit за URL (http://jsbin.com/adiwa3/2/edit) должно открыть редактор для вашего тестирования. Проверьте это в IE, чтобы увидеть проблему, и в другом современном браузере, чтобы увидеть нужный результат.

Часть, которая в настоящее время исправляет (ошибочно) проблему, находится между if(i==#){...}, который должен быть изменен на некоторую математику, поскольку число li может измениться.

Я надеюсь, что кто-то может помочь мне с этим. Спасибо вам.

Answer 1

Я нашел этот проект для кроссбраузерных преобразований http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Попробуйте проанализировать код, чтобы понять, как он ведет себя в IE (или напрямую загрузить скрипт:)).

Answer 2

У меня была такая же проблема без возможности запуска Javascript на IE. Вот найденное мной решение.

Answer 3

Хорошо, я нашел решение. Мне нужно было использовать costheta для левой позиции и sintheta для верхней позиции и умножить их на расстояние по ширине. Суммируя это с высотой и шириной, разделяя это на 2, я получаю правильное значение.

that.css({
  left: (cos * dis / 2) - (parseInt(that.width()) / 2),
  top: (sin * dis / 2) - (parseInt(that.height()) / 2)
});

Вы можете найти рабочий код здесь http://jsbin.com/adiwa3/53 и рабочий пример здесь http://jeroenvanwarmerdam.nl/contact.aspx