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
Chrome Bug with Colspan and Border
How to Import Local Image Using Knitr for Markdown
CSS Flex Box Last Space Removed
100% Width Background Image with an 'Auto' Height
What Happens If I Don't Put a <!Doctype HTML> in My Code? Will It Make Any Major Changes
How to Make My Navi-Bar The Same Across My HTML
Draw Single Pixel Line in HTML5 Canvas
What Does "<HTML Xmlns="Http://Www.W3.Org/1999/Xhtml">" Do
What HTML/CSS Attributes Are Mail Safe
Why Td Width Is Not Working or Not Followed
Where Is Data Stored When Using an HTML 5 Web SQL Database
How to Make New Heading Tag Numbers, Such as H7, H8, etc.
Placing an Image to The Top Right Corner - CSS
HTML Input Range Step as an Array of Values
How to Construct a Table Header Than Spans Multiple Rows in HTML
Controlling Spacing Between Table Cells
Radio/Checkbox Alignment in HTML/CSS
Why Does Display:Block Not Stretch Buttons or Input Elements