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
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:
display: inline-block there means that element's block will be displayed inline with each other.
Take a closer look at the
There are those prefixes:
-webkit- (Chrome and newer Opera),
-moz- (Firefox), and
-o- (old Opera).
-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
Again, just in case (features for "olden time" browsers).
The syntax for CSS3 (2D)
transform: scale(x-axis,y-axis);To put the prefix, place it in front of CSS3
transformproperty, no need to put it again on the property value.
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:
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:
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):
As you can see, I put the negative value only on y-axis.
That's about it, an introduction of CSS3 transformation using
- The penguin image from FindIcons
transformproperty documentation on W3C
- Browsers support table for
transformproperty 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">