Que signifie traduire en CSS

translate signifie "déplacer" et est une fonction intégrée à CSS Utilisée conjointement avec l'attribut transform, elle peut déplacer des éléments dans la direction horizontale (axe X) et verticale (axe Y). L'utilisation de translation est divisée en trois situations : 1. "translateX(x)", l'élément se déplace uniquement dans le sens horizontal ; 2. "translateY(y)", l'élément se déplace uniquement dans le sens vertical 3. "transklate ; (x,y) », l’élément se déplace à la fois horizontalement et verticalement.

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

translate signifie : mouvement, translation, déplacement.

Transformation CSS : traduire

En CSS, la méthode traduire() est utilisée avec l'attribut transform pour déplacer les éléments dans la direction horizontale (axe X) et verticale (axe Y).

Pour la méthode déplacement translation(), nous la divisons en 3 situations :

• translateX(x) : l'élément se déplace uniquement dans le sens horizontal (mouvement selon l'axe X) ; l'élément se déplace uniquement dans le sens vertical Mouvement directionnel (mouvement sur l'axe Y)

• transklate(x,y) : L'élément se déplace simultanément dans les directions horizontale et verticale (les axes X et Y se déplacent simultanément)

• où :

x représente l'élément La distance de déplacement dans le sens horizontal (axe X). Lorsque x est positif, cela signifie que l'élément se déplace vers la droite dans le sens horizontal (sens positif de l'axe X). ); lorsque x est négatif, cela signifie que l’élément se déplace vers la gauche dans la direction horizontale (direction négative de l’axe X).

• y représente la distance de déplacement de l'élément dans la direction horizontale (axe y). Lorsque y est positif, cela signifie que l'élément se déplace vers le bas dans la direction verticale ; lorsque y est négatif, cela signifie que l'élément se déplace ; vers le haut dans le sens vertical.

• Dans la réglementation W3C, en raison de l'habitude humaine de lire de haut en bas, la direction positive de l'axe des x dans le système de coordonnées sélectionné est vers la droite, tandis que la direction positive de l'axe des y est vers le bas.

• En CSS3, toutes les méthodes de transformation appartiennent à l'attribut transform, donc toutes les méthodes de transformation doivent être précédées de "transform:" pour indiquer le traitement de "transformation". Tout le monde doit s'en souvenir.

• L'unité est px, em ou pourcentage, etc. Lorsque x et y sont des pourcentages, ils sont équivalents à la largeur + remplissage et à la hauteur + remplissage de l'élément déplacé.

• 1. translation(x, y)
 : Définir la transformation mobile 2D

x est le premier paramètre de valeur de transition, y est la deuxième option de paramètre de valeur de transition. S’il n’est pas fourni, ty a 0 comme valeur. Autrement dit, translation(x,y), ce qui signifie que l'objet est déplacé en fonction de la valeur du paramètre x, y définie. Lorsque la valeur est un nombre négatif, l'objet est déplacé dans la direction opposée. Le point de base est par défaut le. point central de l'élément. Il peut également être basé sur l'origine de la transformation. Effectuer un changement de point de base. Par exemple :

transform:translate(50px,50px):

2. translation(x) : Spécifiez un mouvement dans la direction de l'axe Y

Par exemple :

transform:translateX(50px):

Exemple : L'élément est centré dans la page web

Code :

transform:translateY(50px):

(Partage de vidéos d'apprentissage :

web front-end )

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!