ホームページ > 記事 > ウェブフロントエンド > 翻訳はcss3プロパティですか?

翻訳はcss3プロパティですか?

WBOYオリジナル: 2022-06-23 15:47:422389ブラウズ

translate は css3 の新しい css 属性です。translate 属性は、要素の 2d 変換変換を定義するために使用されます。この属性は、transform 属性と組み合わせてよく使用されます。transform 属性は、2d または 3d を適用できます。要素への変換。構文は「transform:translate(x 軸の移動距離, y 軸の移動距離)」です。

翻訳はcss3プロパティですか?

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

translate は css3 プロパティです。

translate プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。

translate(x,y) 2D 変換を定義します。

構文は次のとおりです:

transform:translate(<translation-value>[, <translation-value>]);

translate() 関数は要素を移動できます。

値:

translate([, ]); は、X 軸と Y 軸上の要素を同時に移動することを意味します。平行移動値＞は変位量を表す。 2 つのパラメータが含まれます。2 番目のパラメータが省略された場合、2 番目のパラメータは 0 になります。パラメータが負の場合は、逆方向に移動することを意味します。

translateX(); は、要素を X 軸 (水平方向) にのみ移動することを意味します。

translateY(); は、要素を Y 軸 (垂直方向) にのみ移動することを意味します。

translateZ(); は、要素自体または要素の親要素にパースペクティブ値が設定されている場合に、要素を Z 軸上のみで移動することを意味します。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>
<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>
<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
</div>
</body>
</html>

出力結果:

翻訳はcss3プロパティですか?

##(学習ビデオ共有:

css ビデオチュートリアル、html ビデオチュートリアル )

以上が翻訳はcss3プロパティですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 html transform

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：float は css3 の新機能ですか?次の記事：float は css3 の新機能ですか?

続きを見る