「CSS」transformプロパティのrotate関数で要素を回転する

2022年3月15日

環境
Google Chrome　99.0.4844.51

書式
transform: rotate(数値deg);
rotate関数を使用して要素を回転させます。単位はdegです。

使用例

<!DOCTYPE html>

<html>

<head>

<title>transformプロパティのrotateサンプル</title>

</head>

<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="trans">rotateで要素を回転させる</div>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <title>transformプロパティのrotateサンプル</title> </head>  <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>

<!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」を回転します。

CSS

Posted by arkgame

関連投稿: