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

青灯夜游
リリース: 2022-09-22 15:21:39
オリジナル
5505 人が閲覧しました

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 フロントエンド

)

以上がCSSで翻訳は何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート