transform is a css property that allows you to transform an element, but in this article, I would like to focus on how to rotate an element.
About transform:rotate()
To handle rotation with transform, use rotate().
The rotation angle can be specified numerically.
transform:rotate(xxxdeg);
deg means something like “xx degrees”.
|
1 2 3 |
.item1{ transform:rotate(45deg); } |
This will rotate the element 45 degrees with the center of the element as the base point.
Example
45 degree
If you want to rotate it semi-clockwise, use -.
|
1 2 3 |
.item2{ transform:rotate(-45deg); } |
Rotate 45 degrees in a semi-clockwise direction.
-45 degree
How to set the reference point when rotating an element.
See this article on how to set the reference point for rotating elements.
【css】要素を回転させるときの基準点を設定する方法
transform:rotate()を使って回転を加えたが意図とした位置で回転してくれないといった悩みはないでしょうか？この場合、回転する基準点を設定することで、意図とした位置で回転させることができます。cssで要素を回転させるときの基準点
arts-factory.net
