CSS3 - RotateY() in center-CodePudding

I wanna rotateY() but from center of this earth image. Now it's rotating from the right side. Here is my code:

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

http://jsfiddle.net/qwrg9684/

CodePudding user response：

It works if you operate on the image directly. 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);
    }
}

If you need it to be in a div you can also set display: inline-block;. The appearance of rotating around the right side of the image is actually the rotation happening around the center of the enclosing div which is expanding horizontally to fit the viewport.

You can see a fiddle here that shows this with a text element that is a sibling of the image.