Блог

Главная - Вопросы по программированию - CSS-анимация: как перевернуть изображение?

CSS-анимация: как перевернуть изображение?

#css #css-animations

Вопрос:

Я пытаюсь сделать простую анимацию в CSS, где изображение перемещается горизонтально. В конце горизонтального перемещения (то есть в самых левых и самых правых точках) я хочу, чтобы изображение перевернулось по вертикальной оси. Я НЕ хочу, чтобы изображение переворачивалось во время горизонтального движения; я хочу, чтобы переворот происходил только в самых левых и самых правых точках.

Вот что у меня есть до сих пор:

 <!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="duck"></div>

  </body>

</html>

.duck {
  width: 100px;
  height: 100px;
  position: relative;
  animation: duck 8s infinite;
}

@keyframes duck {
  0% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }

  50% {
    top: 20px;
    left: 20px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }

  100% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }
}

https://jsfiddle.net/vnu4hyxg/

Как мне сделать сальто?

Ответ №1:

Попробуй это. Я добавил дополнительный кадр, 51%, и установил преобразование на 50, 51 и 100.

 .duck {
  width: 100px;
  height: 100px;
  position: relative;
  animation: duck 8s infinite;
}

@keyframes duck {
  0% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }

  50% {
    top: 20px;
    left: 20px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
    transform: scaleX(1);
  }
  51%{ transform: scaleX(-1);}

  100% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
    transform: scaleX(-1)
  }
} 
 <!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="duck"></div>

  </body>

</html>

Ответ №2:

попробуйте это

 <style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAABUCAMAAACP31ggAAAAeFBMVEX///8AUZf2 vsAPY Cn8MATJUAT5aoudLi6fEASpSgtc7CzN7R3OjL1ONIcaj5 /0AQJBeg7E1Z6IFV5uInsMARZLu8/cAN4wnYJ wv9a x9sAK4iQpsZ3k7sjY6CbsMtSeqwAMIoAIIVsi7ZxlrxAdqoAJYa3yd0JiWMVAAADTElEQVRoge2Y63KrIBSFUWLERIOJ9ZZqNE1b3/8ND7hRuRk7p2emZ6Z8fyIL9l5qNiIi5HA4HA6Hw FwfJvYBKHCosaErkZJPYga2Wz4VRSoRDlCVxyYeNlHKKIKT4lKaynjoMZif81XI0i5r65ynyjCZT35KpykjH2uhK34ojo0QIgcTBXoyHi2uizdaD2U2n1/Ct/ErsrdZv96vhXbrMQad/b/vuqiBKu7Ite0NyLykU t53WtroK9Bq/n1NPVGQ8nqMg0LdqJfE2uDU/tvrTZGbDpaYoSA/JtQeBrdKzc6J FAlaR6m2qtxfRIj2jCTLOvlHUfBSzdIq/QNvrRbv1Mgl P lNErx22zfyOHN1AHgUvXL23cOoKV8LUUB ZEqCJSXa9q3PQKioPYj95NuKUUfR7s4yjaF0m76/jfBy4lzUOwOiznku00Yd8EAPdWRj Og8rSuFfUTm/jaAqPd8/E0JBOTvoAfbddXdLpyber3VxeS22KIdRFXDCfo 4KcfRLaXTd/fRg1TtbfOX5Vi6ReztR/mmc15oKRfZvRzxOql15V1GVyM2wjWzRB1y qXN2gQ2b5QV1BClVpXmaWuLtUyj3YiqkZkKcGKoKPQt uK s/WIxVf7/eVoeNb0lfXo5/i AJcFbUFsZ3OuxGjEtGul7YvDl9adr2xOK7RFit1BS9Z93kdDNR6WeoKoRP0BfwN/ut11eCcg1Xf yjmn9M/WqUg3ET7AVHlgV97Ccf8HAY4xo9NXyredalV1du 2ob6oUsCSm3Z/hPCgw6bxKQzVKk/RlRrIxECuyclurNftbkPhf2gZR86USbqPhQfxkRs7xcF48NM2YmK/aDu7mc41SiZ710XF3DE9imRKLG5rsYqw fxSNTYSHrnvqSpO21WERN2NhZ1ptCj4InNY DaCi0bort4GJLhO XwV4RFSI6JujwlRwN2xldTBa5j5VBFE68g5BpPB3IAEzoaDg1SfP0qjzQw 39L4zsDJ8evsGIVeykK6opdwZt4sR7krxQlu/ekHmhXdKqvkR1bv2 wcvVujXhkFHt5vPBFGVrxRfVQxOqzECUmLK9FTeJlxadKx7znFr9qtLj1CXI4HA6Hw FwOP4BfwB7YGP7W9EsdQAAAABJRU5ErkJggg==" alt="Paris">

Комментарии:

1. Я не уверен, что это должно сделать с моей анимацией.

Метки: