CSS旋转360度
CSS旋转360度
提问于 2017-02-13 02:27:44
我想使用CSS将一个矩形旋转360度(甚至> 360度)。旋转的中心是“右中心”。如果我使用下面的CSS代码进行180度旋转(并用JavaScript触发旋转)，它工作得很好：
.animated.rotation {
-webkit-animation-duration: 9s;
animation-duration: 9s;
}
@keyframes rotation {
from {
-webkit-transform-origin: right center;
transform-origin: right center;
opacity: 1;
-webkit-animation-timing-function: linear;
}
to {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate3d(0, 0, 1, 180deg);
transform: rotate3d(0, 0, 1, 180deg);
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
.rotation {
animation-name: rotation;
}但是，如果我将180度替换为一个360度的角度>=，它将不再起作用。例如，在360度的情况下，不会发生任何事情，因为开始位置等于旋转的结束位置。
如何实现360度或更多的旋转？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-13 03:22:46
因为我们没有可用的代码片段，所以我在这里用发布的CSS编写了一个代码片段，您应该可以这样做
div {
width: 50px;
height: 50px;
border: 1px solid black;
border-top-left-radius: 10px;
margin: 50px;
}
.animated.rotation {
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: rotation;
animation-name: rotation;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
transform-origin: right center;
}
@keyframes rotation {
from {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}<div class="animated rotation"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42191499
复制相关文章
相似问题
腾讯云开发者
