css 图片沿Y轴翻转

有一张gif图片，非常符合项目的需求，但是图片的方向不对，如下图：

，而我需要是这样的：

解决方案：通过CSS平移旋转后即可达到效果，html如下：

<div class="my-auto" style="margin-left: 20%">
    <img :alt="title" src="../../../assets/images/bg2.gif" class="bg2Class" />
</div>

css代码如下：

.bg2Class {
      position: absolute;
      left: 30%;
      top: 30%;
      animation: rotoImg 10s linear infinite;
      width: 300px;
      height: 300px;
    }

@keyframes rotoImg {
      from {
        transform: rotateY(180deg);/*绕Y轴旋转180度*/
      }
      to {
        transform: rotateY(180deg);
      }
    }