How to invert (mirror / flip) an image

Navigation
3

Well, I need to invert a preference image if possible with CSS. I do not know if that is possible.

I wanted to stick the arrow pointing to the left. Thanks

    
asked by anonymous 31.03.2017 / 11:17

3 answers

12

Yes, it is possible with the property tansform: scaleX(..) you do this easily: 

img {
  width: 260px;
}
#esquerda {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
<img id="direita" src="https://www.bahn.com/en/view/mdb/pv/4zu1/zuege/mdb_203432_ic_2_leipzig_rgb_1000px_980x245_cp_0x226_1000x476.jpg"><imgid="esquerda" src="https://www.bahn.com/en/view/mdb/pv/4zu1/zuege/mdb_203432_ic_2_leipzig_rgb_1000px_980x245_cp_0x226_1000x476.jpg">
    
31.03.2017 / 11:31
3

Within the transform attribute, there are also the rotate (), rotateX (), rotateY (), rotate3d () and rotateZ () functions, all of which work with the deg or Portuguese degrees, the basic values can be any of 0 to 360 *.

For your case, you would make a rotation on the Y axis by 180 degrees, something like this. 

.refletir-esquerda{
   transform: rotateY(180deg);
}

Comments:

  • The values attributes the rotations can be any number, even the negatives, these values make sense when you want to animate the object, for example the number 720 indicates that there have been two complete rotations.
  • Negative values interfere in the direction of rotation.

    • More about transform functions in mozilla transform function

        
    31.03.2017 / 13:47
    0

    Boy, what you're trying to do is called Image Mirror .

    CSS has this feature, as Miguel well said. But there are several image editors out there that do the mirroring of images and which I particularly choose to use.

    If you want something more basic and understandable, use Photoscape . It's free and very practical and easy to use.

    Now, if you want something more professional that uses not only basic things like masks, effects and etc., I suggest Corel Draw or Adobe Photoshop itself .

    But as it is just an image mirroring that you need, it uses the same CSS commands.

        
    31.03.2017 / 13:10
    What is a nodeList object in JavaScript? How do I know if an object is an array in javascript (without jquery)?