How to invert an image inside an @keyframe?

1

Well I'm using this @keyframe , but after descending to the right I would like the image to be inverted, this code does the inversion as I want:

img {
//      -moz-transform: scaleX(-1);
//      -o-transform: scaleX(-1);
//      -webkit-transform: scaleX(-1);
//      transform: scaleX(-1);
//      filter: FlipH;
//      -ms-filter: "FlipH";
//    }

And this is my @keyframe :

@keyframes move {
  0%   { top: 750px; left: 0px; transform: translate(0, 0); } //posição inicial
  10%  { top: 750px; left: 100%; transform: translate(-135%, 0) } //vai para a direita
  15%  { top: 1100px; left: 100%; transform: translate(-135%, -50%) } //desce do lado direito
  25%  { top: 1100px; left: 0px; transform: translate(35%, -50%) } //vai para a esquerda
  30%  { top: 1500px; left: 0px; transform: translate(35%, -120%) } //desce do lado esquerdo
  40%  { top: 1500px; left: 100%; transform: translate(-120%, -120%) } //vai para a direita
  45%  { top: 1500px; left: 100%; transform: translate(-120%, -50%) } //desce do lado direito
  55%  { top: 1500px; left: 0px; transform: translate(35%, -50%) } //vai para a esquerda
  60%  { top: 1910px; left: 0px; transform: translate(35%, -120%) } //desce do lado esquerdo
  70%  { top: 1910px; left: 100%; transform: translate(-120%, -120%) } //vai para a direita
  75%  { top: 1915px; left: 100%; transform: translate(-120%, -50%) } //desce do lado direito
  85%  { top: 1915px; left: 0px; transform: translate(35%, -50%) } //vai para a esquerda
  90%  { top: 2320px; left: 0px; transform: translate(35%, -120%) } //desce do lado esquerdo
  100% { top: 2320px; left: 100%; transform: translate(-120%, -120%) } //vai para a direita
}

I wanted to use that code (or one that does the same) to invert the image after the code that says "descends from the right side" after the 15%.

    
asked by anonymous 03.04.2017 / 11:51

1 answer

0

Problem solved.

You only need to add scaleX(-1) after translate .

    
18.04.2017 / 16:59