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

您需要transform: 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);
    }
}

Answer 2

您需要的是使用rotateY转换属性：

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

小提琴： http://jsfiddle.net/robertp/zeCbx/

我认为你的意思是'中心点'是变换原点（transform-origin），它默认是居中的，但可以改变。

在这里，您可以阅读有关CSS3转换的更多信息： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms