Flipping/Inverting/Mirroring Text Using CSS Only

Flipping/Inverting/Mirroring text using css only

Your code is correct but there is an easier way to do this:

img.flip {
  -moz-transform:    scaleX(-1); /* Gecko */
  -o-transform:      scaleX(-1); /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform:         scaleX(-1); /* Standard */

  filter: FlipH;                 /* IE 6/7/8 */
}

I think this solves your centered mirroring issue.

As noted you will have to set the element to use a display of block, inline-block etc.

Can you use CSS to mirror/flip text?

You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

And a vertical flip would involve scaling the div like this:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

---

DEMO:

span{ display: inline-block; margin:1em; } .flip_H{ transform: scale(-1, 1); color:red; }.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text ✂</span><span class='flip_V'>Demo text ✂</span>

Controlling position of the CSS mirrored text

Add display: inline-block; this will make it all in one line:

<style>
span.flip {
        display: inline-block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
    }
</style>

<p>Some text <span class="flip">mirror</span> and more text</p>​

If you want it on a different line, use this:

<style>
span.flip {
        display: block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
        width: 36px; 
    }
</style>

<p>Some text <span class="flip">mirror</span> and more text</p>​

Flip horizontally html and css

Your fiddle already had the start of the answer - to do a second flip on the text. There was an extra , preventing the second rule from being parsed.

I've updated the fiddle to include the heading elements, and set them to inline-block because inline elements can't be transformed.

.flip-horizontal, .x-grid-cell-inner, .x-column-header-text, .x-panel-header-text {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.x-column-header-text, .x-panel-header-text {
    display: inline-block;
}

Is that possible to make video mirrored?

You can do it using a CSS3 3D transformation.

#videoElement
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

This will rotate it 180 degrees around its Y axis (so you're now looking at it from behind) which gives the same appearance as being mirrored.

Example at http://jsfiddle.net/DuT9U/1/

Flip the html webpage horizontally not text

Change your css :

body {
 -webkit-transform:rotateY(180deg);
 -moz-transform:rotateY(180deg);
 -o-transform:rotateY(180deg);
 -ms-transform:rotateY(180deg);
}
.vertical-menu {
 width: 200px;
 -webkit-transform:rotateY(180deg);
 -moz-transform:rotateY(180deg);
 -o-transform:rotateY(180deg);
 -ms-transform:rotateY(180deg);
}

.vertical-menu a {
 background-color: #eee;
 color: black;
 display: block;
 padding: 12px;
 text-decoration: none;
}

.vertical-menu a:hover {
 background-color: #ccc;
}

.vertical-menu a.active {
 background-color: #4CAF50;
 color: white;
}
h1{
-webkit-transform:rotateY(180deg);
 -moz-transform:rotateY(180deg);
 -o-transform:rotateY(180deg);
 -ms-transform:rotateY(180deg);
}

Flip / mirror an image horizontally + vertically with css

Try this:

.img-hor-vert {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

Updated fiddle: https://jsfiddle.net/7vg2tn83/1/

It wasn't working before because you were overriding the transform in your css. So instead of doing both, it just did the last one. Sort of like if you did background-color twice, it would override the first one.

How to rotate + flip element with CSS

I fiddled with jsfiddle, and this worked:

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

To relate it to your question, the resulting CSS looks like

transform: rotate(90deg) scaleX(-1);

CSS Text orientation : vertically oriented to the right

sideways isn't supported by all the browser. Instead you can replace it with a scale transformation

div {  writing-mode: vertical-rl;  /*text-orientation: sideways;*/  transform:scale(-1);}

<div>dimanche</div>

---

Related Topics