Comment puis-je aligner un élément pivoté sur le bord gauche en CSS ?-tutoriel CSS-php.cn

Comment puis-je aligner un élément pivoté sur le bord gauche en CSS ?

Susan Sarandon

Libérer： 2024-11-10 00:40:02

original

583 Les gens l'ont consulté

How Can I Align a Rotated Element to the Left Edge in CSS?

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

élément avec du texte et positionnez-le dans le coin supérieur gauche. Alors qu'ils ont réussi à le placer en haut, ils ont eu du mal à l'aligner avec le bord gauche.

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>

Copier après la connexion

Avec ces modifications, le

l'élément sera positionné précisément dans le coin supérieur gauche.

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!

source：php.cn

Article précédent：Comment envelopper du texte dans une cellule de données de tableau ( Article suivant：Comment implémenter le rendu et l'insertion de texte de droite à gauche dans les éléments d'entrée HTML ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

1842

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2013

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1695

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...