J'essaie de créer une page Web avec beaucoup d'éléments diviés dont les positions et la taille sont créées séparément. Ensuite, je veux insérer du texte dans ces éléments afin que j'utilise JS pour placer le texte dans l'innerhtml. Y a-t-il un moyen ici que je peux faire pivoter le texte de 90 ans (et non le DIV lui-même depuis que je ne veux pas modifier la position et l'orientation des éléments div?
j'ai essayé -WebKit-Transform: rotation (-90deg); -Moz-transformer: rotation (-90deg); en CSS mais ils tournent tous les DIV les DIV et non seulement le texte.
aucune idée si cela est possible.
Merci!
3 Réponses :
Je n'ai pas essayé cela, mais pourquoi ne pas inclure d'un
Yup .. cela semble raisonnable. Cela aurait été ma force brute devant si il n'y avait pas quelque chose de plus simple :) Étant donné que la transformation fait pivoter la section div entière, vous pouvez définir la hauteur et la largeur de la div contenant le texte puis la transformer. Enveloppez le texte en une portée et réglez-le sur le bloc en ligne.
Remarquez comment le parent div ne pivote pas avec le texte. Extra entre votre
et votre texte, avec un fond transparent? Vous pouvez ensuite faire pivoter que
.
1 commentaires
0
votes
0 commentaires
1
votes
<div class="roundedOne">
<span class="rotate">TEXT</span>
</div>
.rotate {
display: inline-block;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
.roundedOne {
background: red;
}
0 commentaires
Jetez un coup d'œil à ce lien: snook.ca/archives/html_and_css/css-text-rotation semble que vous devez faire de la hax pour différents navigateurs ... peut-être que CSS3 a une meilleure solution.
Merci, j'avais essayé cela, mais c'est là que j'ai eu l'idée de la transformation WebKit / Moz. Mais celles-ci tournent la totalité de la div au lieu du texte.