HTML(28)——Transformation spatiale

2024-07-12

Espace : Les trois axes de coordonnées XYZ définis à partir de l'angle de l'axe de coordonnées forment un espace tridimensionnel. La position de l'axe Z est la même que la direction de la ligne de visée.

transformation de l'espace

Poêle

Les attributs:

transformer : translate3d(x,y,z);
transformer : translateX();
transformer : translateY();
transformer : translateZ();

Valeur : valeur unitaire de pixel/pourcentage

Par défaut nous ne pouvons pas voir la translation de l'axe Z

distance de vue

Fonction : Spécifie la distance entre l'observateur et le plan z=0, ajoutant un effet de perspective à l'élément

Effet de perspective : proche du grand, très petit, proche du réel et lointain du virtuel

Les attributs:(Ajouté au parent, plage de valeurs 800-1 200)

perspective : distance de vue ;


  <style>
    /*空间转换*/
    .father {
      perspective: 1000px;
 
    }
 
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: blue;
      transition: all 0.5s;
    }
 
    .box:hover {
      transform: translateZ(-400px);
    }
  </style>
</head>
 
<body>
  <div class="father">
    <div class="box"></div>
  </div>
</body>

Lorsque la souris survole, un effet presque grand et très petit est produit, et l'axe Z se déplace de -400 px.

tourner

Règle de gauche :

Attribut : La valeur positive ou négative est déterminée en fonction du sens de rotation. Tenez l'arbre rotatif avec votre main gauche, Le pouce pointe dans la direction positive.Le sens de flexion des autres doigts est le sens de rotation positif

transformation: rotationZ (valeur)

transformation: rotationX (valeur)

transformation: rotation Y (valeur)

Partage de technologie