We can rotate and image between 0 and 360 clockwise and even use negative values to rotate and image anti-clockwise.
The syntax to rotate that is widely supported by the browser is as follows
transform: rotate(<angle>) is for making elements move around a fixed point. By default, it rotates around the center of the element.
Most commonly developers use the unit,
deg (degree) to define the angle. Apart from
deg, angle of rotation accepts other units as well like,
deg is most widely used. Read more on MDN
We start by defining the image element
I added top and bottom maring of
50px so that our image do not bump into text on rotation.
Next, we add the
transform property to image element and set its value to
rotate(90deg) as follows
Isn’t that easy?
To rotate, image anti-clockwise we just need to add minus ”-” sign in front of the angle as follows - here were are rotating image minus 45 degrees(anti-clockwise)
Tip: Rotation can be mixed with CSS animations to create some cool effects.
There is a new
rotate property that can be used independently of
transform property, however, as of writing, the support is limited to Firefox browser only - Read More