Menu
Use <span> element with class name “abc” (as your choice). Create CSS file: Specify the Display and Margin properties of <span>. Use the transform properties to set the flip you required ( like vertical text flip , Horizontal text flip, Upside down text flip , Mirroring of text )
The two parameters are X axis, and Y axis, -1 will be a mirror, but you can scale to any size you like to suit your needs. Upside down and backwards would be (-1, -1) . If you're interested in the best option available for cross browser support back in 2011, see my older answer.
We can flip the img element using the CSS transform property. We can do so using the scaleX and scaleY transforms. The CSS to flip it. The rotation transform is also a nice choice for when you want to animate the flip.
Reversing the orientation of images is very easy with CSS, if somewhat counter-intuitive for those not mathematically inclined: to flip an image, you use a value of -1 with the CSS transform properties scaleX or scaleY , depending on whether you wish to flip the element horizontally or vertically.
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.
to mirror use transform: scaleX(-1); to flip use rotate(180deg);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With