css 图片沿Y轴翻转

最新推荐文章于 2024-06-20 11:25:50 发布

原创最新推荐文章于 2024-06-20 11:25:50 发布 · 900 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

vue3 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue3 CSS

1 篇文章

订阅专栏

本文介绍了一个如何通过CSS的transform属性和关键帧动画，将方向不正确的GIF图片调整为需求方向的解决方案，提供了HTML结构和相应的CSS代码实例。

有一张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);
      }
    }