Question

我在链接悬停上有3个图像叠加为css动画。我正在使用position：absolute来覆盖2个动画图像。但后来我不知道如何将动画集中在页面上。

这是CodePen http://codepen.io/beng_beng/pen/IHAFD

<div id="avatar">
  <img src="http://placehold.it/174x174" alt="rotator">
    <a id="rotator" href="#"><img src="http://s28.postimg.org/gfrse4h7d/small.png" alt="rotator"><span><img src="http://s27.postimg.org/j6qdwtowf/small.png" alt="rotator"></span></a>
</div>


body {
  margin:0;
  padding:0;
}
#avatar img {
  position: relative;
  height: 174px;
  width: 174px;
  border-radius: 100%;
}
a#rotator img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out;
}

a#rotator:hover img { 
-webkit-transform: rotate(-360deg); 
-moz-transform: rotate(-360deg); 
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg); 
}

a#rotator span img {
position: absolute;
width: 147px;
height: 147px;
top: 14px;
left: 14px;
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out;
}

a#rotator:hover span img { 
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
}

Answer 1

您可以使用以下技巧将图像居中：

left: 50%;
margin-left:14px;

但是改变King-King建议的父对象的位置会更好。

#avatar {
  margin:0 auto;
  width:174px;
  position:relative;
}

根据http://www.w3schools.com/css/css_positioning.asp

绝对位置元素相对于第一个定位父元素，其位置不是静态。

Answer 2

将此添加到您的CSS：

#avatar {
  text-align:center;
  position:relative;
  width:147px;
  margin:0 auto;
}

我怎样才能横向居中这个动画？

2 个答案: