HTML (28) —— Transformação espacial

2024-07-12

Espaço: Os três eixos coordenados XYZ definidos a partir do ângulo do eixo coordenado formam um espaço tridimensional. A posição do eixo Z é igual à direção da linha de visão.

transformação do espaço

Frigideira

Atributos:

transformar: translate3d(x,y,z);
transformar: translateX();
transformar: traduzirY();
transformar: traduzirZ();

Valor: valor/porcentagem da unidade de pixel

Por padrão não podemos ver a translação do eixo Z

distância de visão

Função: Especifica a distância entre o observador e o plano z=0, adicionando um efeito de perspectiva ao elemento

Efeito de perspectiva: quase grande, muito pequeno, quase real e muito virtual

Atributos:(Adicionado ao pai, intervalo de valores 800-1200)

perspectiva: distância de visão;


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

Quando o mouse está pairando, um efeito quase grande e muito pequeno é produzido, e o eixo Z se move -400px.

girar

Regra da mão esquerda:

Atributo: O valor positivo ou negativo é determinado de acordo com o sentido de rotação. Segure o eixo giratório com a mão esquerda, O polegar aponta na direção positiva.A direção de flexão dos outros dedos é a direção positiva de rotação

transformar:rotateZ(valor)

transformar:rotateX(valor)

transformar:rotateY(valor)

Compartilhamento de tecnologia