transform:translate 本体と表示部分の説明(html,css)

こんにちは tanaka です。

transform translate を使った時
元の場所に
空白ができたりしていませんか?

そんなあなたに向けて

今回は、
transform translate
の、本体と表示部分
の説明をしていきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

説明

結果から言いますと

transform translate

は、
動かす前が本体で
動いた後は表示だけ

です。

具体例

縦方向へ移動

element画像37

今から上の行を
transform translate
で、50px下へ下げます

element画像35

上の文字は動きましたが
下の文字はそのままです。

このことにより、
本体は、動かす前の場所
であることが分かります。

しかも、
動かす前の本体は
透明で見えませんが、
高さ、幅は残っています。

そして、
動かした文字は
実体がなく投影されている
だけです。

横方向へ移動

それでは横方向はどうなのでしょうか?

element画像37

結果から言うと、
縦方向の移動と同じで
動かす前が本体で

動いた後は、
投影されているだけです。

element画像36

注意点

指定は1行で

そして最後に
注意点が一つ

縦と横、
同時に指定する際は
同じ行に記述してください。

それぞれ別の行にすると
最後の行だけが有効になります。

element画像40

まとめ

動かす前が本体

transform translate は、
動かす前が本体で、
動かした後は投影されているだけ。

高さ幅を持っている

本体は、透明になっているだけで、
高さ幅を持っている。

1行で書く

transform translateは、
1行で書く。

以上、
transform:translate 本体と表示部分
の説明(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました