CSSを変えずにフリップテキスト

私は、それぞれの手が単語である時計を持っていますが、180度回転して上下逆さまになって時計があります（例：< p> WORD </p>）。他の方法はは通常、それは（回転のように）変換なしビギーないだろうが、変換としてはCSSを変えずにフリップテキスト

を妨害するであろう任意のCSSを変換する私が使用することはできません正しい時刻に手を設定する唯一のものです使用してフリッピングがありますそれが180degを通過するとすぐにテキストを反転させるのですか？

CSSの例：

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

Javascriptの例設定時間：

HTML

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

：

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

出典

2017-04-06 LuckyXII

あなたの事例をもっと詳しく説明できますか？実際の状態を複製するコードをいくつか追加しましたか？ – DaniP

180度前に1つの要素を使用し、過去180度に1つだけ使用する – Justinas

@DaniP Miguelは回転の代わりに縮尺を使用すると良い答えを得ましたが、私はグーグルでこれを見ていましたが動作しませんスケールを逆にするのを忘れてしまったからです。逆の場合は – LuckyXII

これは、それが180度にヒットしたテキストたびに反転しますCSS

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

#shortHand span { 
    display: inline-block; 
}

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/

出典

2017-04-06 17:38:28

++ニースは変わってしまいます。https://jsfiddle.net/8nr98381/7/ – DaniP

先にスパンとスケールを試しましたが、逆に忘れました。 "私"とあまりにもすぐにあきらめた。いくつかの変更を加えて、これは意図したとおりに機能しました。 – LuckyXII

https://jsfiddle.net/8nr98381/8/に従って、これは無限に上昇し続けます。これは実際問題ですか？ – Shadow