La traduction est-elle une propriété CSS3 ?-Questions et réponses frontales-php.cn

La traduction est-elle une propriété CSS3 ?

WBOY

Libérer： 2022-06-23 15:47:42

original

2412 Les gens l'ont consulté

translate est un nouvel attribut CSS de CSS3 ; l'attribut translation est utilisé pour définir la transformation de traduction 2D de l'élément. Cet attribut est souvent utilisé en conjonction avec l'attribut transform peut appliquer une transformation 2D ou 3D à l'élément. La syntaxe est "transform:translate( Distance de translation dans la direction de l'axe x, distance de translation dans la direction de l'axe y)".

La traduction est-elle une propriété CSS3 ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

translate est une propriété CSS3. La propriété

transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

translate(x,y) définit la transformation 2D.

La syntaxe est la suivante : la fonction

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

Copier après la connexion

translate() peut déplacer des éléments.

Valeur :

translate([, ]); signifie déplacer l'élément sur l'axe X et l'axe Y simultanément, . Contient deux paramètres. Si le deuxième paramètre est omis, le deuxième paramètre est 0 si le paramètre est négatif, cela signifie un déplacement dans la direction opposée.

translateX(); signifie déplacer l'élément uniquement sur l'axe X (direction horizontale).

translateY(); signifie déplacer l'élément uniquement dans l'axe Y (direction verticale).

translateZ(); signifie déplacer l'élément uniquement sur l'axe Z, à condition que l'élément lui-même ou l'élément parent de l'élément ait une valeur de perspective définie.

L'exemple est le suivant :

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

Copier après la connexion

Résultat de sortie :

La traduction est-elle une propriété CSS3 ?