Technologieaustausch

HTML(28) – Raumtransformation

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Raum: Die drei Koordinatenachsen XYZ, die aus dem Koordinatenachsenwinkel definiert werden, bilden einen dreidimensionalen Raum. Die Position der Z-Achse entspricht der Richtung der Sichtlinie.

Raumtransformation

Pfanne

Attribute:

  • transformieren: übersetzen3d(x,y,z);
  • transformieren: übersetzenX();
  • transformieren: übersetzenY();
  • transformieren: übersetzenZ();

Wert: Pixeleinheitswert/Prozentsatz

Standardmäßig können wir die Verschiebung der Z-Achse nicht sehen

Sichtweite

Funktion: Gibt den Abstand zwischen dem Betrachter und der z=0-Ebene an und fügt dem Element einen perspektivischen Effekt hinzu

Perspektivischer Effekt: fast groß, weit klein, fast real und weit virtuell

Attribute:(Zum übergeordneten Element hinzugefügt, Wertebereich 800–1200)

Perspektive: Sichtweite;

  1.   <style>
  2.     /*空间转换*/
  3.     .father {
  4.       perspective: 1000px;
  5.  
  6.     }
  7.  
  8.     .box {
  9.       width: 200px;
  10.       height: 200px;
  11.       margin: 100px auto;
  12.       background-color: blue;
  13.       transition: all 0.5s;
  14.     }
  15.  
  16.     .box:hover {
  17.       transform: translateZ(-400px);
  18.     }
  19.   </style>
  20. </head>
  21.  
  22. <body>
  23.   <div class="father">
  24.     <div class="box"></div>
  25.   </div>
  26. </body>

 

Wenn die Maus schwebt, wird ein nahezu großer und weitaus kleinerer Effekt erzeugt und die Z-Achse bewegt sich um -400 Pixel.

 

drehen

Linkshänder-Regel:

Attribut: Der positive oder negative Wert wird entsprechend der Drehrichtung bestimmt. Halten Sie die rotierende Welle mit der linken Hand fest, Der Daumen zeigt in die positive Richtung.Die Beugerichtung der anderen Finger ist die positive Drehrichtung

transform:rotateZ(Wert)

transform:rotateX(value)

transform:rotateY(Wert)

Persönliches Profil

Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post