Position d'un div après une rotation [Résolu]

[icl1c]

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 :

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 :

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.

[danielhagnoul]

Bonjour

Je vous conseille vivement la lecture des tutoriels suivants :

1. De la géométrie avec CSS
   
2. Les transformations 3D en CSS3

[icl1c]

Bonjour,

Merci pour cette documentation mais je n'ai rien trouvé pour résoudre mon problème. J'ai oublié de préciser que le top serait que ça fonctionne aussi sous IE 6. Connaissez-vous comment gèrent les navigateurs les transformations? car je n'ai aucun problème a effectuer la transformation mais c'est pour récupérer des coordonnées (top,left) cohérentes avec la transformation qui me pose problèmes.

[danielhagnoul]

Bonsoir

J'ai testé les navigateurs installés sur mon ordinateur : Chrome 10, Firefox 4 et IE 9.

C 10 et IE 9 donnent la position après transformation CSS3.

C 10 : "top = 116, left = 59, height = 150, width = 400 ; top = -6.353858947753906, left = 61.646141052246094, height = 150, width = 400"

IE 9 : "top = 117, left = 59, height = 150, width = 400 ; top = -5, left = 62, height = 150, width = 400"

Firefox 4 donne la position initiale. C'est un bug du navigateur.

F 4 : "top = 118, left = 59.16667175292969, height = 150, width = 400 ; top = 118, left = 59.16667175292969, height = 150, width = 400"

Code de test :

Code :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		#btnRotate {margin:12px; }
		.divTest {width:400px; height:150px; margin:12px; padding:6px; border:1px solid grey; background-color:lightgreen; }
		.result {margin-top:120px; }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<button id="btnRotate">Tourne de 45 degrés !</button>
		<div class="divTest">
			<p>Un mot pour remplir</p>
		</div>
		<div class="result"></div>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script>
		(function($){
			var _Options = {
				degrees: 0,
				debug: true
			};
 
			var _avecStyle = function(self, matrix){
				self.attr("style", "-moz-transform:" + matrix +
						  "; -webkit-transform:" + matrix +
						  "; -ms-transform:" + matrix +
						  "; -o-transform:" + matrix +
						  "; transform:" + matrix +
						  ";");
			};
 
			var _setDegrees = function(self, value){
				var v = parseInt(value, 10) || 0;
 
				if (v != _Options.degrees){
					_Options.degrees = v;
 
					var rad = v * Math.PI * 2.0 / 360.0,
						costheta = Math.cos(rad),
						sintheta = Math.sin(rad),
						a = parseFloat(costheta, 10).toFixed(8),
						c = parseFloat(-sintheta, 10).toFixed(8),
						b = parseFloat(sintheta, 10).toFixed(8),
						d = parseFloat(costheta, 10).toFixed(8),
						matrix = "matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0);";
 
					_avecStyle(self, matrix);
 
					var optionsChangedEvent = new $.Event("optionsChanged");
 
					optionsChangedEvent.dvjh = {
						initiateur: self,
						optionsKey: "degrees",
						optionsValue: v
					};
 
					self.trigger(optionsChangedEvent);
				}
			};
 
			$.fn.extend({
				plugin: function(options){
					var self = this;
 
					if (_Options.debug){
						self.bind("optionsChanged", function(event){
							var obj = event.dvjh,
								el = obj.initiateur[0];
 
							console.log("L'option " +
								  obj.optionsKey +
								  " a pris la valeur " +
								  obj.optionsValue +
								  " le " +
								  new Date(event.timeStamp).toLocaleString() +
								  " a la demande de l'élément " +
								  el.tagName +
								  " , ID = " +
								  el.id +
								  " , Class = " +
								  el.className);
						});
					}
 
					if (options != undefined){
						$.each(options, function(key, value){
							self.pluginSetOptions(key, value);
						});
					} else {
						// donner une valeur par défaut
						self.pluginSetOptions("degrees", "45");
					}
 
					return this; // Indispensable !
				},
				pluginSetOptions: function(key, value){
					switch(key){
						case "degrees":
							_setDegrees(this, value);
							break;
						default:
							throw "L'option " + key + " n'existe pas";
					};
				},
				pluginGetOptions: function(key){
					switch(key){
						case "degrees":
							return _Options.degrees;
							break;
						default:
							throw "L'option " + key + " n'existe pas";
					};
				}
			});
 
			jQuery.fn.dvjhRotate = function(options){
				return $(this).plugin(options);
			};
		})(jQuery.sub());
 
		$(function() {
			$("div.result").append("top = " + $("div.divTest").offset().top, ", left = " + $("div.divTest").offset().left, ", height = " + $("div.divTest").height(), ", width = " + $("div.divTest").width(), " ; ");
 
			$("#btnRotate").click(function(){
				var objsRotate = $("div.divTest").dvjhRotate();
 
				$("div.result").append("top = " + $("div.divTest").offset().top, ", left = " + $("div.divTest").offset().left, ", height = " + $("div.divTest").height(), ", width = " + $("div.divTest").width());
 
				// objsRotate.pluginSetOptions("degrees", "-105");
			});
		});
	</script>
</body>  
</html>