2
votes

comment afficher la rotation du texte en utilisant css?

J'ai les problèmes suivants: - Je veux faire pivoter le texte comme indiqué dans l'image - Ici, j'essaye de le faire dans le code suivant Quelqu'un peut-il me fournir une solution?

<html>
<head>
<style>

</style>
</head>
<body>

<div id="myDiv">
This div element is rotated .
</div>
<div id="myDiv">
This div element is rotated .
</div>
<div id="myDiv">
This div element is rotated .
</div>

</body>
</html>

div {
  width: 200px;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top:20px;
}

div#myDiv {
  -ms-transform: rotate(315deg); 
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg); 
}

Je souhaite définir du texte comme "texte de démonstration" comme indiqué dans l'image :

je veux définir le texte comme" démo text "show in image

html css design-patterns

0 commentaires

4 Réponses :

1
votes

Vous pouvez afficher: inline-block sur vos divs et définir transform-origin à droite.

Voir l'exemple ci-dessous:

<div id="myDiv">
  This div element is rotated .
</div>
<div id="myDiv">
  This div element is rotated .
</div>
<div id="myDiv">
  This div element is rotated .
</div>

div#myDiv {
  width: 200px;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top: 20px;
  display: inline-block; /* add display: inline-block */
}

div#myDiv {
  transform: rotate(315deg);
  transform-origin: right;
}

2 commentaires

vous pouvez définir transform-origin: right; et supprimer la traduction .. nous n'avons plus besoin des préfixes pour transformer

@TemaniAfif ah, j'aime cette idée de transformer l'origine. Merci pour cela, j'ai mis à jour ma réponse maintenant :)

0
votes

Tout d'abord, donner le même identifiant à plus d'un élément html n'est pas valide. J'ai remplacé cela par la classe et j'ai également utilisé le sélecteur correspondant dans le css et ajouté plus de styles ici.

Essayez ceci:

<div class="myDiv">
  This div element is rotated .
</div>
<div class="myDiv">
  This div element is rotated .
</div>
<div class="myDiv">
  This div element is rotated .
</div>

div {
  width: 100%;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top: 20px;
}

.myDiv {
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  display: inline !important;
  float: left;
  width: 200px !important;
}

2 commentaires

grâce au replay mais comment supprimer l'espace entre deux div?

Réduisez au maximum la largeur de la classe myDiv

0
votes

Je pense que vous devriez utiliser flex pour une nature plus dynamique de votre code Si vous voulez construire quelque chose exactement comme dans l'image que vous avez partagée alors, mettez d'abord vos éléments dans un conteneur

<div class="container">

elem 1

elem 2

elem 3

</div>

où le conteneur aura display flex

flex direction sera row créez une grille si vous souhaitez faciliter votre travail, Vous pouvez utiliser la grille bootstrap 4 ainsi que sa fonction flex

une fois la grille définie, placez vos éléments et transformez-les en rotation à l'angle de votre choix ça devrait être l'approche flex placera vos éléments et les réorganisera en douceur (animation par défaut) lorsque l'écran est redimensionné avec seulement quelques lignes de code. essayez de contourner et de mettre à jour. J'espère que cela vous guidera

0 commentaires

1
votes

Voici ma solution pour faire pivoter le texte. Il est réactif pour tous les appareils.

<html>

<head>
  <style>

  </style>
</head>

<body>
  <div class="main">
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
  </div>


</body>

</html>

.main {
  display: flex;
  margin: 4rem auto;
}

div#myDiv {
  background-color: black;
  flex: 0 0 20%;
  text-align: center;
  color: white;
  border: 1px solid black;
  padding: 10px 0;
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

0 commentaires