使用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

因爲你是從translate(-50%,-50%)開始在初始CSS爲.fa.fa-chevron-left.flecha_izqu，當你指定一個新的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>