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);
      }
    }
上一篇:用ChatGPT4.0生成美观的PDF


下一篇:MySql并发事务问题