Can You Use CSS to Mirror/Flip Text

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>

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.

CSS Flip Letter Horizontally

.fliph {  display: inline-block;  vertical-align: top;  transform: scaleX(-1); /* Or also:   rotateY(180deg) */  -ms-filter: fliph;  filter: fliph;}

A<span class="fliph">B</span>BA

Font-Awesome 5 - CSS Pseudo-elements, how to mirror/rotate icon

You can use transform property to rotate or mirror your icon.

Please check below code:

body {    font-family: Arial;    font-size: 13px;}
a {    text-decoration: none;    color: #515151;}
a:before {   font-family: "Font Awesome 5 Free";   content: "\f07a";   display: inline-block;   padding-right: 3px;   vertical-align: middle;   font-weight:900;}
a:last-of-type:before {   font-family: "Font Awesome 5 Free";   content: "\f07a";   display: inline-block;   padding-right: 3px;   vertical-align: middle;   font-weight:900;   transform: rotateY(180deg);}

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/><a href="#">This is a link</a><a href="#">This is a link</a>

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.

I want to flip a HTML/CSS Animation upside down

Here is my approach:

Your content is positioned in the center of your header with grid layout
Your waves are absolutely positioned at the top of the screen

body {
  margin: 0;
}

header {
  display: grid;
  place-content: center;
  width: 100%;
  min-height: 100vh;
  background-color: blue;
  color: white;
}

header:not(svg) {
  z-index: 1;
}

h1 {
  max-width: max-content;
}

.waves {
  transform: scaleY(-1);
  position: absolute;
  top: 0;
}


/* Animation */

.parallax>use {
  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

<header>
  <h1>Sharif Atassi</h1>
  <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
    <defs>
      <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
    </defs>
    <g class="parallax">
      <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
      <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
      <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
      <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
    </g>
  </svg>
</header>

Can you create a horizontally flipped text shadow using only text-shadow CSS property

You can achieve this effect with the ::after pseudo element and the transform property:

html, body{  height: 100%;}body{  display: flex;  align-items: center;  justify-content: center;}.shadow{  font: 80px sans-serif;  text-shadow: -100px 200px 69px rgba(0,0,0,0.2);}.shadow::after{  content: "Shadow Text";    display: block;    color: rgba(0,0,0,.65);    transform: rotate3d(1, 0, 0, 148deg) scale(1, 3) skew(-50deg, 0deg);    margin: 12px 0 0 35px;}

<span class="shadow">Shadow 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>

Can You Use CSS to Mirror/Flip Text