Maison > Article > interface Web > La traduction est-elle une propriété CSS3 ?

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

WBOYoriginal: 2022-06-23 15:47:422389parcourir

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)".

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>]);

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>

Résultat de sortie :

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

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 html transform

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Float est-il une nouvelle fonctionnalité de CSS3 ?Article suivant：Float est-il une nouvelle fonctionnalité de CSS3 ?

Articles Liés

Voir plus