ホームへ

CSSでX軸Y軸の移動方法

「CSSでX軸とY軸を指定して移動させるのってどうやるんだっけ?」

X軸Y軸の移動方法を解説します。

X軸Y軸の移動 transform:translate()

CSSでX軸Y軸を移動させるには「transform」を使います。

X軸だけ移動させるには「transform:translateX()」です。

Y軸だけ移動させるには「transform:translateY()」です。

()内にはpxや%などで移動距離を指定します。

逆向きに移動させたいときはマイナス値を指定します。

両方を指定するには「transform:translate()」です。

()内には(X,Y)の順で移動距離を指定します。XとYの間は「,」で仕切ります。

下記は指定例です。青い要素の上に半透明の赤い要素が乗っています。

この赤い要素を動かします。

元の状態

指定なし

<style>
.example{
    border: 1px solid #999;
    background: #000fbf;
    width: 100px;
}
.example>div{
    border: 1px solid #999;
    padding: 5px;
    background: rgba(255, 125, 125, 0.5);
    height: 100px;
}
</style>

<div class="example">
    <div></div>
</div>

X軸の移動

transform: translateX(70%)

<style>
.example2{
    border: 1px solid #999;
    background: #000fbf;
    width: 100px;
}
.example2>div{
    /*コレ*/transform: translateX(70%);
    border: 1px solid #999;
    padding: 5px;
    background: rgba(255, 125, 125, 0.5);
    height: 100px;
}
</style>

<div class="example2">
    <div></div>
</div>

Y軸の移動

transform: translateY(30%)

<style>
.example3{
    border: 1px solid #999;
    background: #000fbf;
    width: 100px;
}
.example3>div{
    /*コレ*/transform: translateY(30%);
    border: 1px solid #999;
    padding: 5px;
    background: rgba(255, 125, 125, 0.5);
    height: 100px;
}
</style>

<div class="example3">
    <div></div>
</div>

X軸,Y軸の移動

transform: translate(70%,30%)

<style>
.example4{
    border: 1px solid #999;
    background: #000fbf;
    width: 100px;
}
.example4>div{
    /*コレ*/transform: translate(70%,30%);
    border: 1px solid #999;
    padding: 5px;
    background: rgba(255, 125, 125, 0.5);
    height: 100px;
}
</style>

<div class="example4">
    <div></div>
</div>

まとめ

  • X軸の移動「transform:translateX()」
  • Y軸の移動「transform:translateY()」
  • X軸Y軸の移動「transform:translate(X,Y)」

()内にpxや%など移動距離を指定

以上、CSSでX軸Y軸を移動する方法でした。

マンガで読める関連記事