How to invert an image within a @keyframe?

Asked

Viewed 45 times

1

Well I’m wearing this @keyframe, but after descending to the right I would like the image to be reversed, this code does the inversion as I want it:

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

And this is mine @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 reverse the image after the code that says "goes down on the right side" after 15%.

css

1 answer

0

Problem solved.

Just need to add scaleX(-1) after translate.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.