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
img { transform: rotate(90deg); }
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, grad
, rad
, and turn
however deg
is most widely used. Read more on MDN
We start by defining the image element
<img width='150px' height='50px' style='margin: 50px 0;' src='/example/open.png' />
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
<img width='150px' height='50px' style='margin: 50px 0; transform: rotate(90deg)' src='/example/open.png' />
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)
<img width='150px' height='50px' style='margin: 50px 0; transform: rotate(-45deg)' src='/example/open.png' />
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