围绕中心css3旋转图像答案

【问题标题】：Rotate image around center css3围绕中心css3旋转图像
【发布时间】：2014-05-19 10:47:22
【问题描述】：

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

很难解释，所以我做了一个演示：

.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);
  }
}

&lt;div class="world"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" /&gt;&lt;/div&gt;

感谢您的帮助（工作帮助将记入最终实验）

【问题讨论】：

您不必将原点设置为图像的中心，使用：transform-origin
感谢您的回复，但经过一番摆弄 - 我所要做的就是将图像类指定为 .world 并且一切正常 - 澄清一下 - 我正在旋转 div 而不是图像和我认为 div 的来源是右下角。
不，div的默认原点在左上角。

标签： css rotation center

【解决方案1】：

你需要设置元素的大小并指定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;

小提琴示例：http://jsfiddle.net/RbXRM/3/

【讨论】：

事实上transform-origin默认居中jsfiddle.net/RbXRM/2
@KingKing 不错，我以为默认值是0, 0, 0。它是每个浏览器的默认值吗？
我不确定，但应该是这样，因为那是 CSS3 规范中写的 w3schools.com/cssref/css3_pr_transform-origin.asp :)

【解决方案2】：

您没有限制 div 的大小。

其实你根本不需要 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);}
}

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

【讨论】：

就是这样 - 我在你回答时想通了 - 无论如何谢谢你。 Paulie_D 将归功于

【解决方案3】：

你只需要旋转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;
}

或修改div.world 的显示，使其在图像上显示it shrinks (inline-block,inline-table,table) 甚至float

【讨论】：