Question

I have a clock where each hands are words (e.g: < p >WORD< /p >) but as they pass 180deg they ofc turn upside down. Normally flipping it using transform (like rotate) would be no biggie but as transform is the only thing setting the hands at the correct time I can't use any transform css that would interfere

is there any other way of flipping the text as soon as it passes 180deg?

CSS example:

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

Javascript example setting time:

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属性的垂直文本，这里有一篇关于{3}与CSS3的写得很好的文章：

generatedcontent.org/post/45384206019/writing-modes

您还可以在Can I Use

上查看writing-mode媒体资源的浏览器支持情况

希望这会奏效！

Flip Text Without CSS Transform

2 个答案: