CSS文字旋轉是網頁設計中常用的技巧，可以用來凸顯某些文字或者改變排版效果，但是在實踐中很容易遇到文字翻轉或者顛倒的問題，看起來不太美觀。本文將介紹如何使用CSS實現文字旋轉時始終保持正向。

.rotate {
transform: rotate(30deg);
transform-origin: 0% 0%;
writing-mode: vertical-lr;
text-orientation: upright;
}

在上面的CSS代碼中，我們使用了transform屬性來對文字進行旋轉，其中rotate(30deg)表示對文字進行30度的順時針旋轉。但是如果直接使用這個屬性，文字將會順時針翻轉后在倒立著顯示，不符合我們的預期。

為了解決這個問題，我們需要使用transform-origin屬性來改變旋轉的原點位置，同時添加writing-mode和text-orientation屬性。具體解釋如下：

• transform-origin屬性：定義變形元素的基點位置。在本例中，我們將基點位置設置為左上角(0%,0%)。
• writing-mode屬性：定義了一個元素中的文本應該如何在水平線上或垂直線上顯示。在本例中，我們使用了vertical-lr值表示在垂直線上顯示。
• text-orientation屬性：定義了文本在可讀方向上的顯示方向。在本例中，我們使用了upright值，表示文本始終保持正向顯示。

這樣一來，我們就可以輕松實現CSS文字旋轉時始終保持正向的效果了，不用再擔心出現顛倒或者翻轉的狀況。