CSS3 - RotateY() in center

Question

我想要rotateY()，但是从地球图像的中心。现在它从右边旋转。下面是我的代码:

@keyframes rotate {
to {
transform: rotateY(-360deg);
}
}

http://jsfiddle.net/qwrg9684/

Answer 1

如果您直接操作图像，则可以正常工作。https://jsfiddle.net/akso4r6q/

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

#logo {
animation: rotate 5s linear infinite;
transform-origin: center center;
}
@keyframes rotate {
to {
transform: rotateY(360deg);
}
}

如果您需要它在div中，您也可以设置display: inline-block;。围绕图像右侧旋转的外观实际上是围绕包围div的中心发生的旋转，该div水平扩展以适合视窗。

您可以在这里看到一个小提琴，它显示了一个文本元素，是图像的兄弟。