CSS3实现图像绕中心旋转

Question

我试图围绕世界中心旋转它，但似乎无法正确地旋转它（围绕自身中心轴）。

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

.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>

感谢您的帮助（在最终实验中，工作帮助将被认可）

- anthonytherockjohnson

---

你不需要使用 transform-origin 将原点设置为图像的中心吗？ - Cyclonecode

谢谢回复，但经过一点调整 - 我所要做的就是将图像类指定为.world，然后一切都运行得很好 - 澄清一下，我旋转的是div而不是图像，而div的原点我认为是右下角。 - anthonytherockjohnson

不，div的默认原点在左上角。 - Cyclonecode

Answer 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/

- Fabrizio Calderan

---

实际上，默认情况下 transform-origin 属性是居中的。http://jsfiddle.net/RbXRM/2/ - King King

@KingKing 不错，我以为默认值是 0, 0, 0。这是每个浏览器的默认值吗？ - Fabrizio Calderan

我不确定，但应该是这样的，因为这就是写在CSS3规范中的http://www.w3schools.com/cssref/css3_pr_transform-origin.asp :) - King King

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

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

- Paulie_D

---

就是这样 - 我在你回答的时候想到了 - 无论如何还是谢谢你。Paulie_D会得到信用。 - anthonytherockjohnson

Answer 3

您只需要旋转图片。

.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 的显示方式，让它在图片（inline-block、inline-table、table）上缩小甚至浮动。

- G-Cyrillus