en utilisant la transformation CSS3: rotation dans le problème d'origine IE

Question

Je travaille sur un projet qui utilise la nouvelle fonctionnalité CSS3 transform:rotate(180deg). Chaque navigateur moderne a son propre tag, mais le supporte. Seul IE (bien sûr) ne le fait pas. Mais avec l'utilisation de filtres, la même chose peut être réalisée. Le seul problème est que IE utilise une autre origine comme le fait CSS3. Ma conjecture est qu'avec des maths, l'origine peut être centrée, mais je ne comprends pas (mes maths ne sont plus ce qu'elles étaient).

Le code et l'exemple peuvent être trouvés ici: http://jsbin.com/adiwa3/2. Ajout de /edit derrière l'url (http://jsbin.com/adiwa3/2/edit) devrait ouvrir l'éditeur pour vos tests. Vérifiez dans IE pour voir le problème et dans un autre navigateur moderne pour voir le résultat nécessaire.

La partie qui corrige actuellement (à tort) le problème est entre le if(i==#){...} qui devrait être changé en maths, car le nombre de li peut changer.

J'espère que quelqu'un peut m'aider avec ceci. Thnx vous.

Answer 1

Ok, j'ai trouvé la solution. J'avais besoin d'utiliser le costheta pour la position gauche et le sintheta pour la position supérieure et de les multiplier avec la distance de largeur. En additionnant cela avec la hauteur et la largeur, en le divisant par 2, cela me donne la valeur correcte.

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

Vous pouvez trouver le code de travail ici http://jsbin.com/adiwa3/53 et un exemple de travail ici http://jeroenvanwarmerdam.nl/contact.aspx

Answer 2

J'ai trouvé ce projet pour multi-navigateur transforme http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Essayez d'analyser le code pour comprendre comment il se comporte dans IE (ou téléchargez directement le script :)).

Answer 3

J'ai eu le même problème sans la possibilité d'exécuter Javascript est désactivé sur IE. Here is la solution que j'ai trouvée.