「CSS」transformプロパティのtranslate関数で要素を移動する

2022年3月15日

環境
Google Chrome　99.0.4844.51

書式
transform: translate(水平px数値, 垂直px数値);
translateX(数値+単位)とした場合は水平のみの移動になります。
translateY(数値+単位)とした場合は垂直のみの移動になります。transform は CSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。

使用例

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
  <!--translate関数で右に20px,下に25px移動させます -->
<style>
  .trans {
    transform: translate(20px, 25px);
    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">translateで要素を移動させる</div>
  </div>

</body>
</html>

結果
translate関数でdiv要素「trans」を右に20px,下に25px移動します。

CSS

Posted by arkgame

関連記事: