翻訳はcss3プロパティですか?-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-06-23 15:47:42

オリジナル

2381 人が閲覧しました

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プロパティですか?