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

CSSのtranslateY()を使って要素をY軸方向に変換する方法

CSSのtranslateY(n)メソッドを使うと、要素をY軸(垂直方向)に沿って移動(変換)できます。

構文

構文は以下のとおりです。

translateY(n)

ここで、nは移動ベクトルのY座標(縦方向の移動量)を表す長さの値です。正の値を指定すると要素は下方向へ、負の値を指定すると上方向へ移動します。

例

実際の使用例を見てみましょう。

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

この例では、.transクラスが適用された要素が、元の位置から20pxだけ下方向へ移動して表示されます。変換前の要素は黒、変換後の要素はオレンジ色の背景になるため、移動前後の位置関係がひと目でわかるようになっています。

なお、translateY()は要素のレイアウトに影響を与えず、視覚的な位置だけをずらすため、アニメーションやホバー効果などにもよく利用されます。

  1. CSS3のrotateZ()を使ってZ軸方向に要素を回転させる方法

    CSS3では、rotateZ(angle) メソッドを使うことで、要素をZ軸（奥行き方向）を基準に回転させることができます。Z軸は画面の手前から奥へと伸びる軸のため、実際には2D回転のように見えますが、3D変換の一部として扱われます。rotateZ() の基本構文transform: rotateZ(角度);角度には deg（度数法）や rad（ラジアン）などの単位を指定できます。正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。使用例以下の例では、rotateZ(90deg) を使ってdiv要素を90度回転させています。<html>   

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用