CSS 围绕中心 css3 旋转图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22908242/
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
Rotate image around center css3
提问by anthonytherockjohnson
I'm 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 demo:
很难解释所以我做了一个演示：
.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);
}
}<div class="world"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" /></div>Thanks for the help (working help will be credited in the final experiment)
感谢您的帮助（工作帮助将在最终实验中计入）
采纳答案by Paulie_D
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:
事实上，您根本不需要 div，您只需将该类应用于图像即可：
.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;
display: block;
}
@-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);}
} <img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>回答by Fabrizio Calderan
you need to set the size of the element and specify the transform-originproperty
您需要设置元素的大小并指定transform-origin属性
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 256px;
height: 256px;
Example fiddle : http://jsfiddle.net/RbXRM/3/
示例小提琴：http: //jsfiddle.net/RbXRM/3/
回答by G-Cyrillus
you need to spin only the img
你只需要旋转 img
.world img
{
-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;
}
or modify display of div.worldso it it shrinkson image (inline-block,inline-table,table) or even floatit
或修改显示的div.world，从而它it shrinks使图像（inline-block,inline-table,table）或甚至float它
