CSSで翻訳は何を意味しますか-フロントエンドQ&A-php.cn

CSSで翻訳は何を意味しますか

青灯夜游

リリース： 2022-09-22 15:21:39

オリジナル

5431 人が閲覧しました

translate は「移動」を意味する CSS に組み込まれている関数で、transform 属性と組み合わせて使用すると、要素を水平方向 (X 軸) と垂直方向 (Y 軸) に移動させることができます。トランスレートの使用は 3 つの状況に分けられます: 1. 「translateX(x)」、要素は水平方向のみに移動します。 2. 「translateY(y)」、要素は垂直方向にのみ移動します。 3. 「transklate」 (x,y) 」を実行すると、要素は水平方向と垂直方向の両方に移動します。

CSSで翻訳は何を意味しますか

このチュートリアルの動作環境: 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):ログイン後にコピー

CSSで翻訳は何を意味しますか

2.translate(x): 移動を指定します

例:

transform:translateX(50px):ログイン後にコピー

CSSで翻訳は何を意味しますか

##3.translate(y): Y軸方向の移動を指定

例:

transform:translateY(50px):

ログイン後にコピー

CSSで翻訳は何を意味しますか

#例: Web ページの中央に要素を配置

コード:

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

ログイン後にコピー

(学習ビデオ共有: CSSで翻訳は何を意味しますか Web フロントエンド