Faire pivoter un élément autour d'un certain point (sans utiliser l'origine de la transformation) avec javascript

Question

Je veux être capable de retourner une coordonnée d'un élément après l'avoir fait pivoter autour d'un certain point. C'est ce que j'ai jusqu'ici (mais c'est incorrect).

function rotateAroundPoint(pointX,pointY,angle) { 
    //converting degrees to rads 
    angle = angle * Math.PI/180.0 
    newX = Math.cos(angle) * pointX - Math.sin(angle) * pointY; 
    newY = Math.sin(angle) * pointX + Math.cos(angle) * pointY; 
    return({x:newX,y:newY}); 
} 

var result = rotate(50,50,45); 
/* offsetting by the result should make it look rotated around the point 50 50 */   
document.getElementById("div").setAttribute("style","top:"+(result.y)+"px;left:"+(result.x)+"px;"); 

le css:

#div 
{ 
width:100px; 
height:100px; 
padding:10px; 
position: absolute; 
border: 1px solid black; 
background-color: red; 
-webkit-transform: rotate(45deg); 
} 

Answer 1

Le CSS transform tourne autour du centre de l'élément; Je comprends que vous cherchez à déplacer l'élément de sorte qu'il semble être tourné autour d'un point différent. La façon naturelle de le faire serait d'origine transformée, mais vous dites que vous ne voulez pas faire cela - je suppose que vous avez une bonne raison. Ce que vous devez faire est de décaler la position de l'élément de la valeur de son centre s'il est tourné autour de ce point. Par conséquent:

1. Soit le point p = la moitié de la largeur et la hauteur de l'élément (en utilisant getComputedStyle, si nécessaire).
2. p = p - point d'origine de la rotation.
3. p = faites pivoter (p, angle ) (où rotate est le (mal nommé, car elle ne tourne pas autour d'un point, mais la fonction d'origine) dans votre code).
4. p =p + origine rotation Point
5. p =p - demi-pointures de l'élément.

p contient maintenant les valeurs à affecter en haut/à gauche. Notez que les étapes 2 – 4 sont la procédure normale de rotation autour d'un point autre que l'origine; Les étapes 1 et 5 sont simplement décalées par rapport à l'origine et au retour de la transformation par défaut.

---

Si cela est pas ce que vous recherchez, alors s'il vous plaît fournir un diagramme montrant les résultats que vous voulez.