CODEWITHSUNDEEP
javascripthtmlcss
LuckyXII
LuckyXII

Reputation: 45

Flip Text Without CSS Transform

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)`;

Upvotes: 1

Views: 1991

Answers (2)

Nik Lakhani
Nik Lakhani

Reputation: 217

You can try vertical text with CSS3 writing-mode property, here is a well written article about writing-mode with CSS3:

generatedcontent.org/post/45384206019/writing-modes

You can also refer about browser support for writing-mode property at Can I Use

Hope this will work!

Upvotes: 0

Miguel
Miguel

Reputation: 20633

This will flip the text every time it hits 180 degrees:

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 Demo: https://jsfiddle.net/8nr98381/6/

Upvotes: 1

Related Questions