HTML(28)——Transformación espacial

2024-07-12

Espacio: los tres ejes de coordenadas XYZ definidos desde el ángulo del eje de coordenadas forman un espacio tridimensional. La posición del eje Z es la misma que la dirección de la línea de visión.

transformación espacial

Cacerola

Atributos:

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

Valor: valor/porcentaje de unidad de píxel

Por defecto no podemos ver la traslación del eje Z.

distancia de visión

Función: Especifica la distancia entre el observador y el plano z=0, añadiendo un efecto de perspectiva al elemento.

Efecto de perspectiva: casi grande, muy pequeño, casi real y muy virtual

Atributos:(Agregado al padre, rango de valores 800-1200)

perspectiva: distancia de visión;


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

Cuando el mouse está flotando, se produce un efecto casi grande y muy pequeño, y el eje Z se mueve -400 px.

girar

Regla de la mano izquierda:

Atributo: El valor positivo o negativo se determina según el sentido de rotación. Sostenga el eje giratorio con la mano izquierda, El pulgar apunta en dirección positiva.La dirección de flexión de otros dedos es la dirección de rotación positiva.

transformar: rotar Z (valor)

transformar: rotarX (valor)

transformar: rotar Y (valor)

Compartir tecnología