-1
votes

Comment centrer un rectangle rotatif à son emplacement d'origine en haut à gauche

une note: le message original a été supprimé avec son utilisateur et, comme je l'ai trouvé cela pourrait être utile, je le republié. em>

Le rectangle doit être tourné -90deg et être verticale centrée dans le côté gauche de l'écran. Comme vous pouvez le voir dans l'image ci-dessous. P>
si possible, seuls HTML et CSS doivent être utilisés. P>
p>
Le problème est, pour faire pivoter d'abord l'élément, ce qui le rend plus difficile à centrer. P>
empilement de pile
p>

<div>Lorem Ipsum</div>

html css css-transforms

0 commentaires

3 Réponses :

1
votes

Pour mieux contrôler la rotation, et plus facilement à gauche Aligner et centrifuger verticalement, utilisez à la fois le Transform-Origine Code> et transformer code> .

Fiche d'abord dans le coin gauche / supérieur comme centre de la rotation en ajoutant Transform-Origine: haut de gauche; au div code>. p>

second, par combinaison rotate code> et traduire code>, déplacez-le la moitié de sa propre largeur à gauche ( translatex (-50%) code>), puis le faites pivoter à 90 degrés dans le sens inverse des aiguilles d'une montre rotation (-90.0deg) code>. p>

Note 1; Lorsque vous utilisez plus d'un code> la valeur, ils s'exécutent de droite à gauche, qui dans l'échantillon ci-dessous, il commence par translatex code>. P> P> P> note 2; Je supprimai temporaire les propriétés préfixées, de sorte que vous devez les ajouter à nouveau. Em> p>

empilement SNIPPET P>

P>



<div class="faked-body">
  <div>Lorem Ipsum</div>
</div>

0 commentaires

0
votes

We can use the 'text-orientation' property instead of 'rotate'.
I tried the below code and it worked for me.
 html,
 body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        align-content: center;
      }
body > div {
        background-color: #ff0000;
        color: white;
        font-weight: bold;
        padding: 10px;
        width: auto;
        height: auto;
        writing-mode: vertical-rl;
        text-orientation: upright;
      }
Create another parent div to 'Lorem Ipsum' and apply  "display: flex;
            align-items: center;
            align-content: center;" properties to the parent div to avoid giving flex to 'body' tag.
Hope it helps.

1 commentaires

Les lettres sont supposées être tournées aussi. Notez également que le support du navigateur sur ceux-ci est assez bas

-1
votes

compris. Veuillez essayer le CSS ci-dessous, cela peut résoudre votre problème.

body, html {
  height: 100%;
  display: grid;
  font-size: 16px;
  font-family: Arial, sans-serif;
}
div {
  margin: auto auto auto 10;
    background-color: #FF0000;
    -webkit-transform: rotate(-90.0deg);
    -moz-transform: rotate(-90.0deg);
    -ms-transform: rotate(-90.0deg);
    -o-transform: rotate(-90.0deg);
    transform: rotate(-90.0deg);
    padding: 10px;
}

0 commentaires