Maison >interface Web >tutoriel CSS >Comment puis-je aligner un élément pivoté sur le bord gauche en CSS ?
Comment puis-je aligner un élément pivoté sur le bord gauche en CSS ?
- Susan Sarandonoriginal
- 2024-11-10 00:40:02619parcourir
Positionnement et rotation des éléments
En CSS, il est possible de faire pivoter des éléments autour d'un point précis. Cependant, il peut parfois être difficile de positionner avec précision l’élément après l’avoir fait pivoter. C'est là que la propriété transform-origin entre en jeu.
Problème :
Un utilisateur souhaite faire pivoter un objet
Solution :
Pour aligner l'élément pivoté avec le bord gauche, vous devez définir la propriété transform-origin en en haut à gauche. Ceci définit le point de référence pour les opérations de rotation et de translation. De plus, modifier la valeur translateX sur -100% déplacera l'origine de l'élément vers l'extrême gauche, l'alignant efficacement avec le bord gauche.
Exemple :
body {
margin: 0;
}
.credit {
transform-origin: top left;
position: absolute;
background-color: pink;
transform: rotate(-90deg) translateX(-100%);
}
<div class="credit">
Picture by Name
</div>
Avec ces modifications, le
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!