HTML(28)—Spatial transformation

HTML(28)—Spatial transformatio

2024-07-12

Spatium: Tres axes coordinatae XYZ ab axi coordinate definiti angulum faciunt tria dimensiva spatium.

locus mutatio

Pan

Attributa:

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

Valorem: pixel unitas valorem / recipis

Defaltam translationem axis Z videre non possumus

visus procul

Munus: distantiam intuentis et z=0 significat, addito prospectu effectum elementi

Effectus speculativus: prope magnum, longe parvum, prope realem et longe virtualem

Attributa:(Additum parenti valorem range 800-1200)

prospectum: aspectum procul;


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

Cum mus volitans, effectus propinquus magnus et longe minimus producitur, et Z-axis -400px movet.

rotate

Regula sinistra manu:

Attributum: valor affirmativus vel negativus secundum directionem rotationis determinatur. Habe in sinistra manu telum rotating; Pollex puncta in directum positivum.Directio flexionis aliorum digitorum est directio positiva gyrationis

transform: rotateZ (valorem)

transform: rotateX (valorem)

transform: rotateY (valorem)

Technology sharing