翻转文本，而不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

希望这将工作！