如何只翻转背景图片而内容不变

自己只想翻转背景图片，不想翻转里面内容，直接在元素里面用transform会导致内容也翻转。。。。。。解决办法：
废话不多说直接上实例

html内容，要翻转背景的盒子

<div class="bottom"></div>

css内容，盒子大小自己设置，我这里不想打了

.bottom::before{
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: -1;
                background: url(../img/true.png) no-repeat top center;
                background-size: 100% 100%;
                transform:scaleY(-1);
            }
 .bottom{
                position: relative;
            }

自己测试效果，不服来辩