「CSS」transformプロパティのtranslate関数で要素を移動する
環境
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移動します。