Quelle est l'utilité de Translate3d en CSS3-Questions et réponses frontales-php.cn

Quelle est l'utilité de Translate3d en CSS3

WBOY

Libérer： 2022-02-17 16:39:12

original

4944 Les gens l'ont consulté

En CSS3, translate3d() est utilisé en conjonction avec l'attribut transform pour définir la transformation 3D de l'élément. La syntaxe est "transform: translate3d(x,y,z)" ; axes de l'élément respectivement. La distance déplacée dans la direction.

Quelle est l'utilité de Translate3d en CSS3

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

À quoi sert translate3d en CSS3 ?

translate3d(x,y,z) est utilisé comme valeur de l'attribut transform pour définir la transformation 3D. L'attribut

transform applique une transformation 2D ou 3D à l'élément

La syntaxe est :

 tranform: translate3d(x,y,z)

Copier après la connexion

La signification de ces trois paramètres :

transform : translationX(100px) : se déplace uniquement sur l'axe x

transform : translationY (100px) : Déplacement uniquement sur l'axe y

transform: translationZ(100px) : Déplacement uniquement sur l'axe z

transform: translation3d(x,y,z) : xyz représente respectivement la distance dans la direction du axe à déplacer

Les exemples sont les suivants :

<!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:hover {
transform:translate3d(8px,8px,0);
}
.div {
width:100px;
height:80px;
background-color: pink;
}
</style>
  <head>
<body>
<div class="div"></div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Quelle est lutilité de Translate3d en CSS3