CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のtranslateY()でY軸方向に要素を変換する方法

CSS3では、translateY(y)メソッドを使用することで、要素をY軸（縦）方向に移動させることができます。この記事では、translateY()の基本的な構文と実際の使用例について解説します。

translateY()の構文

translateY()メソッドの構文は以下の通りです。

translateY(y)

引数の意味は次の通りです。

  • y： 移動ベクトルの縦方向（Y座標）の距離を表す長さの値です。px、em、remなどの単位が使用できます。

正の値を指定すると要素は下方向に移動し、負の値を指定すると上方向に移動します。

translateY()の使用例

以下は、div要素をY軸方向に20px移動させる具体的なコード例です。

div {
   width: 40px;
   height: 40px;
   background-color: black;
}
.trans {
   transform: translateY(20px);
   background-color: orange;
}

この例では、基本となるdiv要素は黒色で表示され、.transクラスが適用された要素はオレンジ色になり、元の位置から下へ20px移動して表示されます。

ポイントまとめ

  • translateY()は要素のレイアウトに影響を与えず、視覚的な位置だけを移動させます。
  • transitionプロパティと組み合わせることで、滑らかなアニメーション効果を実現できます。
  • X軸方向の移動にはtranslateX()、両方を同時に指定したい場合はtranslate()を使用します。
  1. CSS3の2D変換関数（transform）の使い方を徹底解説

    CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。 主な2D変換関数の一覧 以下に、よく使用される代表的な2D変換関数をまとめました。 番号関数と説明 1matrix(n,n,n,n,n,n)6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。 2translate(x,y)要素をX軸方向とY

  2. CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

    CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。 CSS3で使える主な3D変換関数 3D変換を呼び出すために使用される主なメソッドは以下の通りです。 番号値と説明 1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16個の値からなる行列を使用して、要素を変換します。 2translate3d(x,y,z)X軸・Y軸・Z軸の3つの値を使って、要素を移動します。 3t