使用translateX()函数将元素在X轴上移动，同时也会影响Y轴。

Question

我只是想制作一个动画，将箭头沿着x轴移动。我想要将箭头从左向右移动。 但是当使用以下代码：

-webkit-transform: translateX(4%);

它还在Y轴上移动。为什么会这样，如何解决？ http://jsfiddle.net/f0LkLLmb/

<div class='contenedor_flecha_prev'>
  <i class="fa fa-chevron-left flecha_izqu" ></i>
</div>

.contenedor_flecha_prev{
position: fixed;
height: 80%;
width: 8%;
background: black;
bottom: 10%;
min-width: 35px;
left: 0px;
z-index: 90;
opacity:0.5;
cursor:pointer;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.fa.fa-chevron-left.flecha_izqu{
font-size: 55px;
color: white;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
opacity: 1;
}

.contenedor_flecha_prev:hover .fa.fa-chevron-left.flecha_izqu {
-webkit-animation: flecha_izquierda 1.5s infinite; /* Safari 4+ */
}


@-webkit-keyframes flecha_izquierda {
50%   { 
-webkit-transform: translateX(4%);
}
}        

- yavg

Answer 1

由于在.fa.fa-chevron-left.flecha_izqu的初始CSS中你是从translate(-50%,-50%)开始的，当你指定一个新的transform时，它会完全覆盖旧的transform。所以你的动画是从translate(-50%,-50%)到translate(4%,0)。

在你的动画中，也要指定y轴，即-50%。

.contenedor_flecha_prev {
  position: fixed;
  height: 80%;
  width: 8%;
  background: black;
  bottom: 10%;
  min-width: 35px;
  left: 0px;
  z-index: 90;
  opacity: 0.5;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.fa.fa-chevron-left.flecha_izqu {
  font-size: 55px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  opacity: 1;
}

.contenedor_flecha_prev:hover .fa.fa-chevron-left.flecha_izqu {
  -webkit-animation: flecha_izquierda 1.5s infinite;
  /* Safari 4+ */
}

@-webkit-keyframes flecha_izquierda {
  50% {
    -webkit-transform: translate(4%, -50%);
  }
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='contenedor_flecha_prev'>
  <i class="fa fa-chevron-left flecha_izqu"></i>
</div>

- Michael Coker