CSS CSS3 旋转动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16771225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Rotate Animation
提问by Borsn
<img class="image" src="" alt="" width="120" height="120">
Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.
无法让这个动画图像工作，它应该进行 360 度旋转。
I guess something's wrong with the CSS below, as it just stays still.
我猜下面的 CSS 有问题，因为它只是保持静止。
.image {
float: left;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-top: -60px;
margin-left: -60px;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
} to {
-ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
} to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
} to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
}
回答by Giona
Here is a demo. The correct animation CSS:
这是一个演示。正确的动画 CSS：
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">Some notes on your code:
关于您的代码的一些说明：
- You've nested the keyframes inside the
.imagerule, and that's incorrect float:leftwon't work on absolutely positioned elements- Have a look at caniuse: IE10 doesn't need the
-ms-prefix
- 您已将关键帧嵌套在
.image规则中，这是不正确的 float:left不适用于绝对定位的元素- 看看caniuse: IE10 不需要
-ms-前缀
回答by Ryan de Vries
I have a rotating image using the same thing as you:
我有一个使用与您相同的旋转图像：
.knoop1 img{
position:absolute;
width:114px;
height:114px;
top:400px;
margin:0 auto;
margin-left:-195px;
z-index:0;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.knoop1:hover img{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
回答by Nitesh
To achieve the 360 degree rotation, here is the Working Solution.
要实现 360 度旋转，这里是工作解决方案。
The HTML:
HTML：
<img class="image" src="your-image.png">
The CSS:
CSS：
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
You have to hover on the image and you will get the 360 degree rotation effect.
您必须将鼠标悬停在图像上，您将获得 360 度旋转效果。
PS: Add a -webkit-extension for it to work on chrome and other webkit browers. You can check the updated fiddle for webkit HERE
PS：-webkit-为它添加一个扩展以在 chrome 和其他 webkit 浏览器上工作。您可以在此处检查 webkit 的更新小提琴
回答by Heo ??t Hades
if you want to flip image you can use it.
如果你想翻转图像，你可以使用它。
.image{
width: 100%;
-webkit-animation:spin 3s linear infinite;
-moz-animation:spin 3s linear infinite;
animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
回答by Charles Mbogo
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">回答by Omar bakhsh
try this easy
试试这个简单
.btn-circle span {
top: 0;
position: absolute;
font-size: 18px;
text-align: center;
text-decoration: none;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.btn-circle span :hover {
color :silver;
}
/* rotate 360 key for refresh btn */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">↻</span></button>回答by Abhi
Here this should help you
这应该可以帮助你
The below jsfiddle link will help you understand how to rotate a image.I used the same one to rotate the dial of a clock.
下面的 jsfiddle 链接将帮助您了解如何旋转图像。我使用相同的链接来旋转时钟的表盘。
var rotation = function (){
$("#image").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation();
Where: ? t: current time,
在哪里： ？t：当前时间，
? b: begInnIng value,
? b：开始值，
? c: change In value,
? c：改变价值，
? d: duration,
? d：持续时间，
? x: unused
? x：未使用
No easing (linear easing): function(x, t, b, c, d) { return b+(t/d)*c ; }
无缓动（线性缓动）： function(x, t, b, c, d) { return b+(t/d)*c ; }
