html - 使用 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%);
}
}        

Answer 1

因为您是从 .fa.fa-chevron-left.flecha_izqu 的初始 CSS 中的 translate(-50%,-50%) 开始的，并且当您指定一个新的 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>