CSS动画：如何翻转图像？答案

【问题标题】：CSS Animation: how to flip an image?CSS动画：如何翻转图像？
【发布时间】：2021-11-29 19:25:34
【问题描述】：

我正在尝试在 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/

如何进行翻转？

【问题讨论】：

标签： css css-animations

【解决方案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">

【讨论】：

我不确定这对我的动画有什么影响。