CSS3 - RotateY() 居中

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 水平扩展以适合视口。

您可以看到一个 fiddle here，其中显示了与图像同级的文本元素。

CSS3 - RotateY() 居中

CSS3 - RotateY() in center

css

css-animations