Faire pivoter une image avec JavaScript

La rotation d’un élément HTML est une exigence courante exécutée à l’aide de CSS. CSS fournit une propriété de transformation que vous pouvez utiliser pour accomplir cette tâche. Dans cet article, nous allons apprendre à faire pivoter des images à l’aide de JavaScript.

Faire pivoter une image avec JavaScript à l’aide de la transformation CSS

La propriété de transformation CSS vous permet de faire pivoter, mettre à l’échelle, incliner ou déplacer un élément. Modifiez l’espace de coordonnées du modèle de format visuel CSS. Un contexte d’empilement est créé si la propriété a une valeur autre que none. Dans ce cas, l’élément agit comme un bloc conteneur dont la position est soit position : fixed ou position : absolute selon les éléments qu’il contient.

La propriété transform peut être spécifiée soit comme un mot-clé none, soit comme une ou plusieurs fonctions transform. Si perspective() est l’une des nombreuses valeurs de fonction, elle doit apparaître en premier.

Syntaxe:

transform: none;
transform: translateX($Xpx) rotate($Ydeg) translateY($Zpx);

Les valeurs de transformation sont transform-function lorsqu’une ou plusieurs des fonctions de transformation CSS doivent être appliquées. Les fonctions de transformation sont multipliées de gauche à droite. Du composé de droite à gauche, les transformations sont effectivement appliquées. Dans la syntaxe ci-dessus, nous utilisons translateX, qui traduit un élément avec un certain pixel horizontalement, translateY, qui traduit un élément avec un certain pixel verticalement, et rotate, qui fait pivoter un élément d’un certain degré autour d’un point fixe sur le plan 2D.

none indique qu’aucune transformation ne doit être appliquée. Voir la documentation transformer pour plus d’informations.

<input id="button" type="button" value="Rotate">
<div id="img_container">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<div>

let angle = 0, img = document.getElementById('img_container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = 'rotate' + angle;
}

#img_container.rotate90 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
#img_container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}

Dans le code ci-dessus, nous créons un conteneur, et chaque fois que l’utilisateur clique sur le bouton de rotation, nous ajoutons 90 degrés à l’angle actuel et prenons le module de 360 ​​degrés. Une fois l’angle final trouvé, nous pouvons ajouter les classes prédéfinies dont les propriétés ont été déclarées à l’aide de CSS.

L’exemple ne montre qu’une rotation de 90 degrés, mais vous pouvez la définir à n’importe quel angle comme 45 degrés ou 105 degrés et ainsi de suite. La sortie du code ci-dessus ressemble à ceci :

https://jsfiddle.net/shraddhapaghdar/a6r9b3p1/8/