Aby obrócić tekst w HTML, wykorzystuje się właściwości CSS, głównie transform: rotate(). Pozwala to na ustawienie dowolnego kąta obrotu elementu, w tym napisu, wokół jego środka. Efekt można uzyskać zarówno dla pojedynczych akapitów, nagłówków, jak i elementów niestandardowych.
Obracanie tekstu za pomocą css: transform: rotate()
Najprostszą metodą na obrót tekstu jest zastosowanie reguły CSS:
.rotate-45 { transform: rotate(45deg); } .rotate--45 { transform: rotate(-45deg); } Przykład użycia w HTML:
<p class="rotate-45">Ten tekst jest obrócony o 45 stopni.</p>
<p class="rotate--45">Ten tekst jest obrócony o -45 stopni.</p> Każdy element, do którego przypiszesz tę klasę, zostanie obrócony o zadany kąt. Wartość w nawiasie może być wyrażona w stopniach (deg), radianach (rad), gradach (grad) lub miliradianach (turn) – przykładowo rotate(90deg) oznacza obrót o 90 stopni.
Przykłady zastosowań
Obrót nagłówka
<h2 style="transform: rotate(15deg);">Obrócony nagłówek</h2> Obrót pionowy (tekst pionowy)
Aby uzyskać efekt pionowego napisu, najczęściej stosuje się obrót o 90 lub -90 stopni:
<p style="transform: rotate(90deg);">Tekst pionowy od dołu do góry</p>
<p style="transform: rotate(-90deg);">Tekst pionowy od góry do dołu</p> Dynamiczne obracanie po najechaniu kursorem
Możesz dodać płynny efekt przy pomocy transition:
.rotate-hover { transition: transform 0.3s; } .rotate-hover:hover { transform: rotate(20deg); } <span class="rotate-hover">Najedź na mnie!</span> Dodatkowe możliwości
- Obracanie z punktem odniesienia – domyślnie obrót odbywa się względem środka elementu. Jeśli chcesz zmienić punkt obrotu, użyj
transform-origin; - Obrót z animacją – efektowny obrót można uzyskać za pomocą animacji kluczowych;
- Stosowanie w praktyce – obrócony tekst świetnie sprawdzi się jako ozdobny nagłówek, etykieta na banerze, czy jako element nawigacji w pasku bocznym.
.obracany-lewy { transform: rotate(45deg); transform-origin: left top; }
@keyframes przyklad-obrotu {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animowany-obrot { animation: przyklad-obrotu 2s linear infinite; }
Uwaga na czytelność
Obracanie tekstu może pogorszyć jego czytelność, zwłaszcza pod dużymi kątami. Dla tekstu pionowego korzystniejszy od rotate(90deg) bywa CSS writing-mode: vertical-rl;, jednak to nie jest obrót, lecz zmiana kierunku zapisu.
Podsumowanie
- transform: rotate() – najpopularniejsza metoda na obrót tekstu;
- Możliwości: dowolny kąt, dynamiczne efekty, płynne przejścia, animacje;
- Zachowaj umiar – korzystaj z tej techniki jedynie tam, gdzie jest to uzasadnione estetycznie lub funkcjonalnie.
To sprawdzony sposób na wzbogacenie Twoich projektów o nietypowe, wizualnie ciekawe elementy tekstowe!
