如何制作顺时针旋转超过359度的纯CSS动画
我对使用transform: rotate()和transition: transform的纯CSS旋转有一个问题。
当旋转超过360度时，这种转变会引起逆时针旋转.请参阅CodePen下面或上面的代码。
我知道我可以不断地增加/减少度值(例如356->360，而不是359->0)，但这是一个React应用程序，我只想在相关的CSS类中使用定义的“state”(即类"over-1“等于3点位置，”over2“等于6点，等等)。
我考虑将旋转值存储在React状态，并根据触发事件增加/减少旋转值，但是我需要将这种样式直接注入HTML中。此外，我正在转换的元素不仅仅是应用角度。我还需要在JavaScript中编码这些值(例如，transform: "translate(-50%, -50%) rotate(" + this.state.rotation + "deg);")，否则设置transform属性将覆盖样式表中的转换(我认为)。
另外，我讨厌JavaScript中的硬编码样式信息。
我尝试使用一个“过渡性”进程(CodePen)，它(1)使用一个类将旋转从270度变为360度，(2)等到动画完成，然后(3)将旋转从360度切换到0度(没有动画)，然后(4)使用转换属性将“正确”类设置为0度(这样就不会是一次性的类分配)。我遇到的问题是，在动画完成之前单击旋转按钮会中断转换，并显示逆时针旋转。
我发现了另外两个相关的问题，但没有给出任何答案。
<!DOCTYPE html>
<html>
<head>
<style>
/* Button to trigger rotation */
#control {
position: absolute;
top: 210px;
left: 100px;
transform: translate(-50%, 0)
}
/* Large, underlying disk */
#under {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 200px;
width: 200px;
border-radius: 50%;
}
/* Smaller, rotating disk */
#over {
position: absolute;
top: 100px;
left: 100px;
background-color: green;
height: 100px;
width: 100px;
z-index: 1;
border-radius: 50%;
}
/* Simple pointer to visually track rotation */
#pointer {
font-size: 50px;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Rotate inner disk to point to the twelve o'clock position */
.over-1 {
transform: translate(-50%, -50%) rotate(0deg);
transition: transform 0.5s;
}
/* Rotate inner disk to point to the three o'clock position */
.over-2 {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform 0.5s;
}
/* Rotate inner disk to point to the six o'clock position */
.over-3 {
transform: translate(-50%, -50%) rotate(180deg);
transition: transform 0.5s;
}
/* Rotate inner disk to point to the nine o'clock position */
.over-4 {
transform: translate(-50%, -50%) rotate(270deg);
transition: transform 0.5s;
}
</style>
<script>
this.position = 1;
/* Rotate the disk clockwise to the next position */
function rotate() {
this.position += 1;
if (this.position === 2) {
document.getElementById("over").classList.remove("over-1");
document.getElementById("over").classList.add("over-2");
}
if (this.position === 3) {
document.getElementById("over").classList.remove("over-2");
document.getElementById("over").classList.add("over-3");
}
if (this.position === 4) {
document.getElementById("over").classList.remove("over-3");
document.getElementById("over").classList.add("over-4");
}
/* PROBLEM: The transition from nine o'clock to twleve o'clock
causes the disk to rotate 270 degrees COUNTER CLOCKWISE */
if (this.position === 5) {
document.getElementById("over").classList.remove("over-4");
document.getElementById("over").classList.add("over-1");
this.position = 1;
}
}
</script>
</head>
<body>
<div id="under"></div>
<div id="over" class="over-1">
<div id="pointer">^</div>
</div>
<div>
<button id="control" onclick="rotate()">Rotate</button>
</div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2022-07-07 03:11:20
正如在评论中所说，要保持顺时针方向旋转，就必须不断增加度。因此，在JavaScript中直接实现这一点要比使用类容易得多：
<!DOCTYPE html>
<html>
<head>
<style>
/* Button to trigger rotation */
#control {
position: absolute;
top: 210px;
left: 100px;
transform: translate(-50%, 0)
}
/* Large, underlying disk */
#under {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 200px;
width: 200px;
border-radius: 50%;
}
/* Smaller, rotating disk */
#over {
position: absolute;
top: 100px;
left: 100px;
background-color: green;
height: 100px;
width: 100px;
z-index: 1;
border-radius: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transition: transform 0.5s;
}
/* Simple pointer to visually track rotation */
#pointer {
font-size: 50px;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="under"></div>
<div id="over">
<div id="pointer">^</div>
</div>
<div>
<button id="control">Rotate</button>
</div>
<script>
window.rotation = 0;
/* Rotate the disk clockwise to the next position */
document.getElementById("control").addEventListener('click', evt => {
window.rotation += 90;
document.getElementById("over").style.transform = `translate(-50%, -50%) rotate(${this.rotation}deg)`;
});
</script>
</body>
</html>
如果您想用类来完成这个任务，那么您必须有第五个带有360deg的类，并将transition分离成一个不同的类。当您到达360deg时，关闭transition，切换到0deg，然后打开转换，这样它就可以无缝地重置，而不会被用户看到。
https://stackoverflow.com/questions/72891736
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号