2
我只是想制作一个动画来移动X轴上的箭头。我想从左到右移动箭头。 但在使用时:使用translateX()在X轴上移动,它也移动Y轴
-webkit-transform: translateX(4%);
它也在Y轴上移动。为什么会发生这种情况,我该如何解决?
<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%);
}
}