En CSS, l'attribut transform peut être utilisé pour réaliser la transformation de traduction de l'élément. Cet attribut peut déplacer l'élément. Lorsque la valeur de l'attribut est "translate(x,y)", l'élément peut être traduit. syntaxe "element { transform:translate(valeur de mouvement horizontal, valeur de mouvement vertical);}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment implémenter la transformation de traduction en CSS
En CSS, vous pouvez utiliser l'attribut transform pour définir la transformation de traduction d'un élément. La fonction de cet attribut est d'appliquer une transformation 2D ou 3D à l'élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.
Lorsque la valeur de l'attribut est définie sur translation(x,y), l'élément peut être traduit. L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
border:1px solid #000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
Lors de l'ajout de "transform:translate(100px,200px) ; » style, le résultat de sortie est le suivant :
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
