翻轉文本，而不CSS變換

Question

我有一個時鐘，每個手的話（例如：< P> WORD </P>），但因爲他們通過180deg他們OFC上下顛倒。 它使用變換（如旋轉）不會有大問題，但由於改造是唯一在正確的時間設定手我不能使用任何轉換CSS會干擾

通常翻轉是否有任何其他方式當它通過180度時翻轉文本？

CSS例子：

#shortHand{ 
    -webkit-transform: rotate(270deg); 
    transform: rotate(270deg); 
    -webkit-transform-origin: 10% 70%; 
    transform-origin: 0% 50%; } 

JavaScript示例設置時間：

shortHand.style.transform = `rotate(${currH}deg)`; 

Answer 1

這將每一次翻轉文本它擊中180度：

HTML

<div id="shortHand"> 
    <span>word</span> 
</div> 

CSS

#shortHand { 
    transform: rotate(270deg); 
    transform-origin: 0% 50%; 
} 

#shortHand span { 
    display: inline-block; 
} 

JS

var shortHand = document.querySelector('#shortHand'); 
var shortHandWord = document.querySelector('#shortHand span'); 

var deg = 270; 
var i = -1; 

setInterval(function() { 
    shortHand.style.transform = `rotate(${deg}deg)`; 

    if (deg % 180 === 90) { 
    i *= -1; 
    shortHandWord.style.transform = `scale(${i})`; 
    } 

    deg++; 
}, 10); 

的jsfiddle演示：https://jsfiddle.net/8nr98381/6/

Answer 2

你可以嘗試用CSS3 writing-mode財產垂直文本，這裏是CSS3良好的撰寫一篇關於writing-mode：

generatedcontent.org/post/45384206019/writing-modes

您也可以參考有關瀏覽器支持writing-mode酒店在Can I Use

希望這將工作！