Lors du développement d'une page Web, les divs sont généralement placés horizontalement sur l'écran d'affichage par défaut. Cependant, CSS fournit plusieurs façons de réorganiser les DIV selon les préférences. Vous pouvez également modifier l'orientation et l'angle de la div en utilisant CSS. Dans ce cas, il est possible de faire pivoter le div en fonction du degré requis.

Dans ce guide, vous parlerez spécifiquement de la procédure pour faire pivoter une div à un angle de 90 degrés. Alors, commençons!

Comment faire tourner Div 90 degrés en CSS?

Pour faire pivoter la div à 90 degrés en CSS "transformer»La propriété est utilisée. Dans la première étape, nous discuterons de la propriété Transform afin que vous puissiez mieux comprendre comment cela fonctionne.

Qu'est-ce que la propriété «Transformer» dans CSS?

Pour la transformation d'un élément 2D ou 3D, le «transformer»La propriété de CSS est utilisée. Cette propriété permet à un élément de tourner, de bouger, de biaiser et de faire évoluer.

Syntaxe

La syntaxe de la propriété Transform est:

transformée: Aucune | Transform-fonctions

Voici la description des valeurs ci-dessus:

• aucun: Il est utilisé pour restreindre la transformation de tout élément.
• Transform-fonctions: Il existe diverses fonctions telles que «tourner()","escalader()","déplacer()" et "fausser()«Cela peut être spécifié.

Maintenant, passons à l'exemple pratique de l'utilisation de la propriété de transformation pour faire tourner un div 90 degrés dans CSS.

Exemple: rotation d'une division 90 degrés en utilisant la propriété CSS «Transformer»

Tout d'abord, dans le HTML, nous créerons une rubrique en utilisant

Tag et un conteneur avec le nom de classe comme «div2»:

Rotation de div 90 degrés:

Rotation de div

Ensuite, dans CSS, utilisez "div«Pour accéder au conteneur créé dans le fichier HTML. Après cela, définissez la largeur et la hauteur de la div comme «200px" et "100px», Réglez la couleur d'arrière-plan de la div comme«RVB (129, 129, 38)". De plus, nous définirons la frontière de Div comme «5px" largeur, "solide"Type, et"rouge" couleur:

div
Largeur: 200px;
hauteur: 100px;
Contexte: RVB (129, 129, 38);
Border: 5px rouge solide;

Le résultat du code donné est:

Maintenant, appliquez le «transformer«Propriété et passe»90”Degrés comme argument de la fonction rotate () et de la transformation-original comme«30%»:

transformée: rotation (90deg);
Transform-Origin: 30%;

Enregistrez le code ajouté et ouvrez le fichier HTML dans le navigateur. En conséquence, vous verrez que le div ajouté est tourné à 90 degrés:

Nous avons compilé la méthode la plus simple pour faire pivoter un div 90 degrés en CSS.

Conclusion

Pour la rotation d'un div 90 degrés en CSS, le «transformer»La propriété peut être utilisée. Il est utilisé pour la transformation des éléments 2D ou 3D. De plus, cette propriété permet à un élément HTML d'être tourné, embroché, mis à l'échelle et déplacé. Ce manuel a discuté de la procédure de rotation d'une div 90 degrés en CSS.