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)至-50%。

在动画中，也指定y轴，这只是.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>

corrplot()

使用translateX（）在X轴上移动，它也移动Y轴

1 个答案: