CSS-3在其中心点水平地循环一个div
CSS-3在其中心点水平地循环一个div
提问于 2013-12-26 11:38:34
目前，我有以下情况：
.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/
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-26 11:49:36
你需要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);
}
}Stack Overflow用户
发布于 2013-12-26 11:54:19
您需要的是使用rotateY transform属性：
@-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转换的更多内容：变换
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20784190
复制相关文章
相似问题
腾讯云开发者
