使用 scale(-1) 实现翻转【css】

时间:2019-10-08 发布者: 访问量:3701

通常,我们要实现一个元素的 180° 翻转,我们会使用transform: rotate(180deg),这里有个小技巧,使用transform: scale(-1)可以达到同样的效果。看个 Demo:

<p class="scale">CSS Nagative Scale(-1)</p> 复制代码
.scale { transform: scale(1); animation: scale 10s infinite linear;
}

@keyframes scale{
    50% { transform: scale(-1);
    }  
    100% { transform: scale(-1);
    }
} 复制代码

看看效果:



发布于
  用户评论
    生活编程