Faire pivoter une image avec JavaScript
![Faire pivoter une image avec JavaScript](/img/JavaScript/feature-image---javascript-rotate-images.webp)
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 :
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn