Flip Text ohne CSS-Transformation

ich eine Uhr haben, wo jeder Hände sind Wörter (z: < p> WORD </p>), aber als sie 180 Grad passieren sie OFC den Kopf stellen. Normalerweise blättert es (wie Drehen)-Transformation wäre kein großes Problem sein, sondern als Transformation ist das einzige, was die Hände an der richtigen Zeiteinstellung ich keine CSS-Transformation verwenden kann, dieFlip Text ohne CSS-Transformation

stören würde, ist es anderer Weg den Text spiegeln, sobald er 180 Grad überschreitet?

CSS Beispiel:

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

Javascript Beispiel Abbindezeit:

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

Quelle

2017-04-06 LuckyXII

Können Sie mehr auf Ihr Beispiel eingehen? etwas mehr Code, um den tatsächlichen Zustand zu replizieren? – DaniP

Verwenden Sie ein Element für vor-180 Grad, ein anderes für die Vergangenheit-180 Grad, zeigen nur eine zu der Zeit – Justinas

@DaniP Miguel hatte eine gute Antwort unten mit Skala anstelle von drehen, ich hatte dies beim googeln gesehen, aber es würde nicht funktionieren weil ich vergaß, die Skala von 1 zu wechseln -> -1 und umgekehrt – LuckyXII

Dadurch wird der Text jedes Mal Flip trifft es um 180 Grad:

HTML

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

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

Quelle

2017-04-06 17:38:28

++ Nizza vielleicht mit einem Übergang wird Smother https://jsfiddle.net/8nr98381/7/ – DaniP

Ich versuchte, spannen und skalieren früher, aber vergessen, umzukehren "Ich" und gab zu früh auf. Mit einigen Modifikationen funktionierte das wie beabsichtigt, Prost! – LuckyXII

Gemäß https://jsfiddle.net/8nr98381/8/ wird dies weiterhin unbegrenzt aufsteigen. Ist das ein Problem in der Praxis? – Shadow

Sie vertikalen Text mit CSS3 writing-mode Eigenschaft versuchen, hier ist ein gut geschriebener Artikel über writing-mode mit CSS3:

generatedcontent.org/post/45384206019/writing-modes

Sie können auch über Browser-Unterstützung für writing-mode Unterkunft Can I Use

Hoffnung verweisen, das wird funktionieren!

Quelle

2017-04-07 07:02:58

Flip Text ohne CSS-Transformation

Antwort

Verwandte Themen