Monkey Raptor

On this post, I'll show you how to implement CSS3 transform property, especially the scale to mirror or flip an image (img), and text wrapped in div element.

For example, we have this remarkable penguin (transparent PNG) image :

Now, we want to flip the image (horizontally), and place it on the left side of the original image.
Something like this:

It's the same image, but I put inline CSS scale transformation for the left image.
The HTML (with the inline CSS) looks like this: <!--Mirrored image on the left--> <img style='border:0; display:inline-block; transform:scale(-1,1); -webkit-transform:scale(-1,1); -moz-transform:scale(-1,1); -o-transform:scale(-1,1)' src='image-URL' /> <!--Original image--> <img style='border:0; display:inline-block' src='image-URL' />
display: inline-block there means that element's block will be displayed inline with each other.

Take a closer look at the transform property.
There are those prefixes: -webkit- (Chrome and newer Opera), -moz- (Firefox), and -o- (old Opera).
The -moz- (for latest Firefox) and -webkit- (for latest Chrome/Opera) aren't needed anymore, just in case. And the current Opera is also prefix-free. The latest Safari, iOS Safari, and Android browser also do not need -webkit- prefix.
Again, just in case (features for "olden time" browsers).

The syntax for CSS3 (2D) transform with scale is:

transform: scale(x-axis,y-axis);

To put the prefix, place it in front of CSS3 transform property, no need to put it again on the property value.

Example:

-webkit-transform: scale(x-axis,y-axis);
-moz-transform: scale(x-axis,y-axis);

We can also independently define only the x ( scaleX ) or y axis ( scaleY ) for the scaling. If we put just one value for the scale transformation; for instance:

transform: scale(3);

Meaning that browser will render the same scaling ratio for both x and y, that is 3 (300%).

Anyway, the value of scale is the scaling (ratio) number, so you don't need to put any unit thingy behind it. Negative value means that the scaling will "move" in opposite of the "default" direction of an axis (either x or y).

---

Let's try another example. Let's use letters. Take a look at this:

The HTML and inline CSS: <div style="text-align:center"> <!-- left text --> <div style='display:inline-block; font-size:40px; font-family:sans-serif'> Hello there you! </div> <!-- right text --> <div style='display:inline-block; font-size:40px; font-family:sans-serif; -moz-transform: scale(-1,1); -o-transform: scale(-1,1); -webkit-transform: scale(-1,1); transform:scale(-1,1)'> Hello there you! </div> </div>

The transform function is not limited to just an image element, you can also apply transformation to another HTML element, on the example above, a <div> tag. As long as we wrap the content inside an HTML tag (especially with element which is by default displayed as block element: div, p, hn, etc), then the content within will follow the element's transformation.

---

Let's try to make the penguin has a mirrored/flipped shadow on the bottom (vertical flip):

This is the HTML of both images above (with inline CSS): <!--top image--> <img style='border:0; display:block; margin:auto;' src='img-URL' /> <!--bottom image--> <img style='border:0; display:block; margin:auto; -moz-transform: scale(1,-1); -o-transform: scale(1,-1); -webkit-transform: scale(1,-1); transform:scale(1,-1); opacity:0.3; margin-top:-40px' src='img-URL' />

As you can see, I put the negative value only on y-axis.

---

That's about it, an introduction of CSS3 transformation using scale.

---

Links

• The penguin image from FindIcons
• CSS transform property documentation on W3C
• Browsers support table for transform property at Can I Use

The img tag in HTML5 doesn't need the closing /. I'm using Blogger here with XHTML, therefore, it's necessary for me.

It should be:
HTML: <img src="URL_of_image" alt="alternate text" other-attr="values">