CSS transform: scale数值为负数实现翻转

文章参考

1. CSS3 transform 属性
2. 你所不知道的 CSS 负值技巧与细节

问题描述

在工作中，发现引入一个图片是正常显示，但是使用背景图之后，发现图片的方向变反了，找大牛来排查问题，最终发现是使用了 transform: scaleX(-1);引起的

scaleX 属性说明

值	描述
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。

scale数值为负数实现翻转

1. scaleX(-1) 水平方向上的翻转
2. scaleY(-1) 纵轴方向上的翻转

<div id="MyDIV" style="transform: scale(-1,-1);">MyDIVdiv>
<style>
#MyDIV {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    background-color: lightblue;
}
style>