Bir arka plan resmini css kullanarak yatay olarak döndürme

Question

Belirli bir sınıf için yatay olarak var olan mevcut bir resmi nasıl çevirebilirim? Bu konuya bakıyordum, How to flip background image using CSS?, ama cevapların hiçbiri benim için işe yaramadı .... Ne yapabilirim?

.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

Ben unsurları çevirmek benim projelerde bu CSS sınıfı kullanmak:

burada

.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

kodudur Ben bugüne kadar çalışma edilmediğini yazdım koddur. o

<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> 

Ve css çalışıyor:

#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; 
}