CSS-3D-Transformationseigenschaften: Transformation und Perspektive

CSS-3D-Transformationseigenschaften: Transformation und Perspektive, spezifische Codebeispiele erforderlich

CSS-3D-Transformationseigenschaften sind eine leistungsstarke Technik, mit der Sie mit etwas einfachem Code atemberaubende visuelle Effekte erzielen können. Unter diesen sind die beiden am häufigsten verwendeten Eigenschaften Transformation und Perspektive.

1. Transformationsattribut

Das Transformationsattribut wird zum Drehen, Skalieren, Neigen, Verschieben und für andere Operationen an Elementen verwendet. Durch die Einstellung verschiedener Parameter können unterschiedliche Effekte erzielt werden.

1. Rotation

Sie können Elemente drehen, indem Sie den Rotationsparameter festlegen. Zum Beispiel:

div {
  transform: rotate(45deg);
}

2. Scale

Sie können eine Skalierung von Elementen erreichen, indem Sie den Skalierungsparameter festlegen. Zum Beispiel:

div {
  transform: scale(1.5);
}

3. skew

Sie können das Element neigen, indem Sie den Skew-Parameter festlegen. Zum Beispiel:

div {
  transform: skew(30deg);
}

4. Move

Sie können Elemente verschieben, indem Sie den Übersetzungsparameter festlegen. Zum Beispiel:

div {
  transform: translate(100px, 50px);
}

2. Perspektivisches Attribut

Das perspektivische Attribut wird verwendet, um den Beobachtungspunkt in der dreidimensionalen Szene zu definieren und beeinflusst den perspektivischen Effekt des Elements. Es kann die Perspektive von Elementen ändern, indem es verschiedene Parameter festlegt.

div {
  perspective: 800px;
}

Nachdem wir das Attribut „Perspektive“ festgelegt haben, müssen wir das Attribut „transform-style“ verwenden, um den Perspektiveffekt auf die untergeordneten Elemente des Elements anzuwenden.

div {
  perspective: 800px;
  transform-style: preserve-3d;
}

3. Anwendung auf Beispiele

Das Folgende ist ein Beispiel, um zu demonstrieren, wie die Transformations- und Perspektivenattribute verwendet werden, um einen Würfeleffekt zu erzielen.

HTML-Code lautet wie folgt:

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

CSS-Code lautet wie folgt:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: spin 6s linear infinite;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

Der obige Code implementiert einen einfachen Würfel und erzielt Rotations- und Perspektiveffekte durch Transformations- und Perspektiveneigenschaften. Sie können den Code selbst ausführen, um den Effekt zu sehen.

Zusammenfassend lässt sich sagen, dass die CSS-3D-Transformationseigenschaften „Transformation“ und „Perspektive“ wichtige Werkzeuge zum Erstellen exquisiter visueller Effekte sind. Mit einfachem Code können wir verschiedene coole Animationseffekte erzielen und die visuelle Attraktivität von Webseiten verbessern.

Das obige ist der detaillierte Inhalt vonCSS-3D-Transformationseigenschaften: Transformation und Perspektive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!