围绕中心css3旋转图像

围绕中心css3旋转图像

本文介绍了围绕中心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.

和我的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:

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

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

07-24 18:33