Discussion :

[thomas.m]

Bonjour à tous,

Après moultes recherches, je n'arrive pas à trouver de solution simple à mon problème. Je génère des pages html contenant des DIV rectangulaires dont la position est absolute sur ma page. Je dois effectuer ensuite des transformations différentes sur chaque div : rotation et scale, mais j'aimerais que mes div gardent la même position absolute qu'avant transformation.
En jouant sur le centre de rotation avec transform-origin je n'arrive pas à obtenir ce que je souhaite car les rotations n'ont jamais la même valeur (90, 180, 270 deg).

Voici un exemple de div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='divTest' style='display:block;position:absolute;border: solid 1 px;left: 97px;top: 858px;transform: scale(0.5) rotate(270deg);transform-origin: 50% 50%;-ms-transform: scale(0.5) rotate(270deg);-ms-transform-origin: 50% 50%;-webkit-transform: scale(0.5) rotate(270deg);-webkit-transform-origin: 50% 50%;'></div>

Voici ce que j'aimerais faire :
Le div initial en rouge est le div ci-dessus. Le div en bleu est ce que j'obtiens et le div vert est ce que j'aimerais obtenir.



Auriez vous une solution à mon problème ?

Merci beaucoup d'avance

[CCyrillus]

as tu essayer, logiquement, transform-origin:top left; ou transform-origin: 0 0 ; ?

Sinon,par exemple : top right + positionement relatif avec decalage : http://codepen.io/anon/pen/qcADf

[thomas.m]

Merci pour ta réponse. Le problème avec transform-origin top left (équivalent à 0 0) c'est que le centre de rotation se retrouve en haut à gauche donc ma div ne se retrouve pas du tout à la même distance left et top qu'initialement.

Le positonnement relatif avec décalage semble ne pas marcher, car par exemple si je fais une rotation de 90deg, il faut faire margin-left:[height de la div]px et si je fais une rotation de 270deg par exemple, c'est margin-top:[width de la div] qu'il faut faire ...

Je suis ouvert aux solutions en javascript

[CCyrillus]

Il ya la solution de donner une class a chaque degrés de rotation utilisé , de façon a maitriser totalement coordonnées d'origine et eventuellement le repositionement visuel en relatif, plutôt que d'inserer les degres de rotation dans le code.

Maintenant, si il y a 360 class a sortir, pas sur que ce soit la solution

[thomas.m]

Il n'y a que 4 rotations (3 en fait) : 0(360) 90 180 270 degrés
par contre chaque div a une position différente ... Comment faire ?

[thomas.m]

une solution avec transform origin = top left (0;0)

si rotate(0deg) :
margin-left:0px
margin-top:0px

si rotate(90deg) :
margin-left: 0px
margin-top: [Width]px

si rotate(180deg) :
margin-left: [Width]px
margin-top: [Height]px

si rotate(270deg) :
margin-left: [Height]px
margin-top: 0px

On peut généraliser avec un peu de trigonométrie :
0 <= deg <= 90° :
margin-left: 0px
margin-top: sin(deg)x[width]px

90 <= deg <= 180° :
margin-left: -cos(deg)x[width]px
margin-top: -cos(deg)x[height]+sin(deg)x[width]px

180 <= deg <= 270° :
margin-left: -cos(deg)x[width]-sin(deg)x[height]px
margin-top: -cos(deg)x[height]px

270 <= deg <= 360° :
margin-left: -sin(deg)x[height]px
margin-top: 0px

schéma :

formule générique (fonctionne entre 0 et 360°) :
margin-left: Max(-cos(deg)x[width];0) - Max(sin(deg)x[height];0) px
margin-top: Max(-cos(deg)x[height];0) + Max(sin(deg)x[width];0) px

Il n'existe rien de plus simple ?
Je pense que je vais utiliser du javascript pour repositionner mes div après transformation, cependant j'ai cru comprendre que selon les navigateurs, les comportements ne sont jamais les mêmes ...