recherche

Maison >interface Web >tutoriel CSS >Comment implémenter la transformation de traduction en CSS

Comment implémenter la transformation de traduction en CSS

WBOY
WBOYoriginal
2021-12-08 10:20:524750parcourir

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

Comment implémenter la transformation de traduction en CSS

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 :

Comment implémenter la transformation de traduction en CSS

Lors de l'ajout de "transform:translate(100px,200px) ; » style, le résultat de sortie est le suivant :

Comment implémenter la transformation de traduction en CSS

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

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：Comment utiliser CSS pour modifier l'effet de l'image lorsque la souris glisse dessusArticle suivant：Comment utiliser CSS pour modifier l'effet de l'image lorsque la souris glisse dessus

Articles Liés

Voir plus