Geek Answers Handbook

Flip background image horizontally using css

How can I flip an existing image that I have horizontally for a specific class? I watched this topic, How to flip a background image using CSS? but none of the answers worked for me .... Any suggestions on what I can do? Here is the code I wrote so far that did not work:

.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); }
+7
html css css3
source share
2 answers

I use this CSS class in my projects to flip elements:

 .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; }
+16
source share

here is the code. it works

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

And 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; }
+1
source share

More articles:


All Articles