CSSでX軸Y軸の移動方法

2021年10月19日

「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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓