「CSS」transformプロパティのrotate関数で要素を回転する
環境
Google Chrome 99.0.4844.51
書式
transform: rotate(数値deg);
rotate関数を使用して要素を回転させます。単位はdegです。
使用例
<!DOCTYPE html> <html> <head> <title>transformプロパティのrotateサンプル</title> </head> <!--rotate関数で指定要素を回転させます --> <style> .trans { transform: rotate(2deg); border: 1px solid #000; background-color: skyblue; width: 250px; height: 60px; } .cft { border: 1px dotted #000; background-color: yellow; width: 250px; height: 60px; } </style> <body> <div class="cft"> <div class="trans">rotateで要素を回転させる</div> </div> </body> </html>
結果
totate関数でdiv要素「trans」を回転します。