围绕中心css3旋转图像 [英] Rotate image around center css3

问题描述

我试图围绕它的中心旋转一个世界 - 但是似乎没有旋转它正确的方式（绕自己的中心轴）

Im trying to spin a world around its center - but cant seem to rotate it the correct way (around its own center axis)

很难解释做了一个小提琴，你可以很好地....小提琴。

Its hard to explain so i made a fiddle you can well....fiddle with.

http：// jsfiddle .net / FQwYJ /

和我的css

.world
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}

@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
} 

感谢您的帮助在最后的实验中）

Thanks for the help (working help will be credited in the final experiment)

推荐答案

您不限制div的大小。

You are not restricting the size of the div.

其实你根本不需要div，你只需要将类应用到图像：

In fact you don't need the div at all, you can just apply the class to the image:

JSfiddle演示

<img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>

这篇关于围绕中心css3旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！