Ich weiß, wie man Text mit CSS um 90 Grad dreht, aber ich versuche, den Text oben rechts auf der Seite (oder einem Elternelement) auszurichten als sein 90-Grad-rotiertes Selbst. Ist das möglich?90 Grad gedrehter Text, bündig zur Seite oben rechts mit CSS
Beispiel:
Keine der vorherigen Lösungen funktioniert für jede Menge Text. Sie müssen transform-origin verwenden.
<div class="container">
<span class="rotate">Hello THERE!</span>
</div>
.rotate {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top;
-ms-transform: rotate(90deg);
-ms-transform-origin: left top;
-o-transform: rotate(90deg);
-o-transform-origin: left top;
transform: rotate(90deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
font-size: 48px;
}
War im Begriff, genau die gleiche Antwort, zu schnell sir –
Dies ist der richtige Weg zu gehen. Wenn Sie irgendwelche Zweifel haben, werfen Sie diese in eine Demo und spielen Sie mit der Schriftgröße des Textes auf und ab ... dann versuchen Sie es mit den anderen Antworten. Dies ist viel flexibler und wartbarer. – Will
Großartig, wir haben uns mit Transformationsursprüngen herumgeschlagen, aber wir konnten es nicht finden. Vielen Dank! – Dan
Mein erstes Mal etwas ganz neu in diesem zu beantworten, aber hier den Code ist:
<div id="block">
<p id="rotate">Hello!!!</p>
</div>
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:absolute;
}
#rotate {
position:relative;/* place the text relateve to whatever tag is devined as absolute */
left:130px;/* change these dimensions - can use left or right */
top:20px;/* change these dimensions can use top or bottom*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
Die Lösung ist einfach, fügen Sie die Rotation in Text und Position absolute .
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:relative;
}
#text {
padding:0;
margin:0;
position:absolute;
right:0;
font-size:30px;
top:40px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
<div id="container">
<p id="text">Hello!!!</p>
</div>
Können Sie den Code anzeigen, den Sie gerade haben? Haben Sie versucht, Ausrichtung zu verwenden? – Siva