CSS-3 围绕中心点水平循环 div

Question

目前，我有以下内容:

.loader_img { 
    margin: auto; display: block; position: relative; top: 31%; 
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

它使图像围绕其中心点循环，如下所示:

我想要的是，使图像以这种方式循环(即水平围绕其圆点)

我一直在努力实现这一目标，但未能成功。谁能告诉我如何让图像围绕其中心点水平移动？

摆弄现状http://jsfiddle.net/5hfBH/1/

Answer 1

您需要变换:rotatey(360deg)。

<强> JSFiddle

HTML

<div class="loader_img">A basic loader</div>

CSS

.loader_img {
    background: red;
    padding:10px;
    display:block;
    width:50px;
    margin:50px auto;
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotatey(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotatey(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotatey(360deg);
        transform:rotatey(360deg);
    }
}