Odwzorowanie tła w poziomie za pomocą css

Question

Jak mogę odwrócić istniejący obrazek, który mam poziomo dla określonej klasy? Szukałem tego wątku, How to flip background image using CSS?, ale żadna z odpowiedzi nie działała dla mnie .... Jakieś sugestie co mogę zrobić? Oto kod Pisałem tak daleko, że nie pracuje:

.cta-dash-green2 > span { 

    display: inline-block; 
    height: 17px; 
    vertical-align: middle; 
    width: 17px; 
    margin: 0 5px 0 0; 
    background: url("../images/icon-cta-dash-green.png"); 

    -webkit-transform:scaleX(-1); 
    -moz-transform:scaleX(-1); 
    -ms-transform:scaleX(-1); 
    -o-transform:scaleX(-1); 
    transform:scaleX(-1); 

} 

Answer 1

Używam tej klasy CSS w moich projektach, aby przerzucić elementy:

.flip-it { 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -ms-transform: scaleX(-1); 
    transform: scaleX(-1); 
    -ms-filter: "FlipH"; 
    filter: FlipH; 
} 

Answer 2

Oto kod. to działa

<div id="f1_container"> 
    <div id="f1_card" class="shadow"> 
    <div class="front face"> 
     <img src="/images/Cirques.jpg"/> 
    </div> 
    <div class="back face center"> 
     <p>This is nice for exposing more information about an image.</p> 
     <p>Any content can go here.</p> 
    </div> 
    </div> 
    </div> 

a CSS:

#f1_container { 
position: relative; 
margin: 10px auto; 
width: 450px; 
height: 281px; 
z-index: 1; 
} 
#f1_container { 
perspective: 1000; 
} 
#f1_card { 
width: 100%; 
height: 100%; 
transform-style: preserve-3d; 
transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
transform: rotateY(180deg); 
box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
position: absolute; 
width: 100%; 
height: 100%; 
backface-visibility: hidden; 
} 
.face.back { 
display: block; 
transform: rotateY(180deg); 
box-sizing: border-box; 
padding: 10px; 
color: white; 
text-align: center; 
background-color: #aaa; 
}