CODEWITHSUNDEEP
htmlcss
user3877471
user3877471

Reputation: 89

Flip a background image horizontally using css

How can I flip an existing image that I have horizontally for a specific class? I was looking at this thread, How to flip background image using CSS?, but none of the answers worked for me.... Any suggestions on what I can do? Here is the code I have written so far that has not been working:

.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);

}

Upvotes: 8

Views: 30654

Answers (2)

user3717117
user3717117

Reputation:

here is the code. it is working

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

Upvotes: 1

Idrees
Idrees

Reputation: 843

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

Upvotes: 20

Related Questions