Maison  >  Article  >  interface Web  >  Comment puis-je faire pivoter un div avec du texte et l'aligner sur le coin supérieur gauche ?

Comment puis-je faire pivoter un div avec du texte et l'aligner sur le coin supérieur gauche ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-06 16:14:02801parcourir

How can I rotate a div with text and align it to the top left corner?

Alignement d'un élément pivoté vers le coin supérieur gauche ou supérieur droit

Dans cette requête, un utilisateur a rencontré un défi lors de la rotation d'un div contenant texte et en l’alignant sur le bord supérieur gauche. L'extrait fourni montre la rotation obtenue à l'aide de transform : rotate(-90deg) translateX(-50%).

La solution réside dans l'ajustement de l'origine de la transformation en haut à gauche, qui spécifie d'où doit provenir la rotation. De plus, la modification de la traduction en translationX(-100%) garantit que le div est positionné à 100 % à gauche de son origine.

Voici l'extrait de code mis à jour :

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

En implémentant Ces changements, le div sera pivoté dans le coin supérieur gauche, l'alignant efficacement sur les bords supérieur et gauche de son conteneur parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn