javascript - 没有 CSS 转换的翻转文本

Question

我有一个时钟，每只手都是单词(例如:

WORD

)，但当它们经过 180 度时，它们会倒置。 通常使用变换(如旋转)翻转它没什么大不了的，但由于变换是唯一在正确时间设置指针的方法，我不能使用任何会干扰的变换 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/