gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:42:45 25 4
gpt4 key购买 nike

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

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

最佳答案

每次达到 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/

关于javascript - 没有 CSS 转换的翻转文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43261842/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com