Bonjour,

J'utilise un script qui me permet d'exécuter une rotation sur un div, cependant je travaille sur les positions des divs et après une transformation les positions (top, left) des divs varient selon le navigateur utilisé.

Voici le script utilisé pour

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/*
 *	jquery.easyRotate 1.0 - 3-11-2010
 * author: Jordan Andree (jordan@noblegiant.com)
 * http://noblegiant.com
 *
 *	Written to ease the implementation of element rotation for cross-browser support
 *	Feel free to do whatever you want with this file
 *
 */
(function ($) {
 
	// base function
	$.fn.extend({
		easyRotate: function(options) {
 
			// default config 
			var defaults = {
				degrees: 0  
			};
 
			// extend the options
			var options = $.extend(defaults, options);
 
			// return function
			return this.each(function() {
 
				// the object 
				var obj = this;
 
				// the degrees param
				var deg = options.degrees;
 
				// calculations to get our matrix
				var deg2radians = Math.PI * 2 / 360;
				var rad = deg * deg2radians;
				var costheta = Math.cos(rad);
				var sintheta = Math.sin(rad);
 
				// vars for cosin and sin
				var a = parseFloat(costheta).toFixed(8);
				var c = parseFloat(-sintheta).toFixed(8);
				var b = parseFloat(sintheta).toFixed(8);
				var d = parseFloat(costheta).toFixed(8);
 
				// the matrix string
				var matrix = "matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0);";
 
				// if IE filters are present
				if (obj.filters) {
 
					obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand');";
					obj.filters.item(0).M11 = costheta;
					obj.filters.item(0).M12 = -sintheta;
					obj.filters.item(0).M21 = sintheta;
					obj.filters.item(0).M22 = costheta;
 
				// else for Safari, Firefox, etc
				}  
					obj.setAttribute("style",   "-moz-transform:  " + matrix + 
														"; -webkit-transform:  " + matrix + 
														"; -ms-transform:  " + matrix + 
														"; transform:  " + matrix + 
														"; -o-transform: " + matrix + "");
 
 
 
			});	
		}
	});
})(jQuery);
j'ai deux problèmes, ce code ne fonctionne pas sous IE8 mais fonctionne sous IE6.

puis lorsque je fais :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	var position = div.position();
	alert('avant :' +position.top+','+position.left);	
	div.css("-webkit-transform-origin",'0px 0px');
	div.css("-moz-transform-origin",'0px 0px');
	div.css("-o-transform-origin",'0px 0px');
	div.css("transform-origin",'0px 0px');
 
	....
 
	  div.easyRotate({
	   degrees: degree
	}); 
 
	div.css("top",position.top+'px');
	div.css("left",position.left+'px');
 
	var pos = div.position();
	alert('apres :'+ pos.top+','+pos.left);
j'obtiens des résultats différents sous chrome :

chrome :
avant : 171,120
après : 158.104 , 118.604

ie6 :
avant : 171,120
après : 171,120

ff :
avant : 171,120
après : 171,120

J'ai l'impression que ce problème n'est pas réellement solvable, mais j'ai absolument besoin de pouvoir faire des rotations à mes blocs et récupérer leur position (top,left) après.. si quelqu'un a une idée, ça serait top.

Merci d'avance.