translate は「移動」を意味する CSS に組み込まれている関数で、transform 属性と組み合わせて使用すると、要素を水平方向 (X 軸) と垂直方向 (Y 軸) に移動させることができます。トランスレートの使用は 3 つの状況に分けられます: 1. 「translateX(x)」、要素は水平方向のみに移動します。 2. 「translateY(y)」、要素は垂直方向にのみ移動します。 3. 「transklate」 (x,y) 」を実行すると、要素は水平方向と垂直方向の両方に移動します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
translate は、移動、平行移動、変位を意味します。
CSS 変換:translate
CSS では、translate() メソッドは、transform 属性と組み合わせて使用され、要素を水平方向に変換します。方向(X 軸)と垂直方向(Y 軸)の移動。
displacement translation() メソッドでは、3 つの状況に分けられます。
translateX(x): 要素は水平方向 (X 軸) にのみ移動します。 motion);
translateY(y): 要素は垂直方向にのみ移動します (Y 軸の移動);
transklate(x ,y): 要素は水平方向に移動します。 方向と垂直方向の両方に移動します (X 軸と Y 軸は同時に移動します)
ここで:
x は、要素が水平方向 (X 軸) に移動することを意味します。x が正の場合、要素は水平方向 (X 軸の正の方向) に右に移動することを意味します。x が負の場合、これは、要素が水平方向 (X 軸の負の方向) の左に移動することを意味します。
y は要素の水平方向 (y 軸) の移動距離を表し、y が正の場合は要素が垂直方向の下に移動することを意味し、y が正の場合は要素が垂直方向に下に移動することを意味します。負の場合、要素は垂直方向に下に移動し、垂直上に移動します。
W3C の規定では、上から下に読む人間の習慣により、選択した座標系の X 軸の正の方向は右になり、正の方向は右になります。 y 軸は下向きです。
CSS3 では、すべての変換メソッドは transform 属性に属するため、すべての変換メソッドの前に「transform:」を付けて「変換」処理を示す必要があります。誰もがこれを覚えておく必要があります。
単位は px、em、パーセントなどです。x と y がパーセントの場合、移動された要素の幅パディングと高さパディングのパーセンテージに相当します。
1.translate(x, y): 2D モバイル変換を定義します。
xx は最初の遷移値パラメータ、y は 2 番目の遷移です。値パラメータのオプション。指定しない場合、ty の値は 0 になります。つまり、translate(x,y) は、設定された x、y パラメータ値に従ってオブジェクトが移動されることを意味します。値が負の数の場合、オブジェクトは反対方向に移動します。その基点のデフォルトは要素の中心点、または変換原点に基づくこともできます。基点を変更します。
例:
transform:translate(50px,50px):
2.translate(x): 移動を指定します
例:
transform:translateX(50px):
##3.translate(y): Y軸方向の移動を指定
例:#
transform:translateY(50px):
コード:
<html> <head> <title>元素页面正中间居中</title> <style> html,body{ height: 100%; margin: 0; padding: 0; background-color: #2b9f6b } div{ width: 450px; height: 300px; background-color: #abcdef; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; } </style> </head> <body> <div>待居中元素</div> </body> </html>
(学習ビデオ共有: Web フロントエンド
)以上がCSSで翻訳は何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。