Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Die Webentwicklung bietet eine Vielzahl von gestalterischen Möglichkeiten, um Benutzererlebnisse zu verbessern. In diesem Artikel werden wir die 3D-Transformationen durch Flipboxen erkunden und dabei insbesondere den Fokus auf deren Responsive Design legen. Von Drehungen über Skalierungen bis hin zu Kippeffekten – 3D-Transformationen bieten eine breite Palette von Möglichkeiten.

Illustation geralt; Smiley Conmongt

3D-Transformationen werden in der Regel in CSS erstellt. CSS bietet eine spezielle Eigenschaft namens transform, die es ermöglicht, 2D- und 3D-Transformationen auf HTML-Elemente anzuwenden. Hierbei können verschiedene Transformationen wie Rotationen, Verschiebungen, Skalierungen und Kippeffekte in 3D-Raum definiert werden.

Beispiel für eine 2D-Transformation in CSS:

.element {
    transform: rotate(45deg);
}

Beispiel für eine 3D-Transformation in CSS:

.element {
    transform: rotateX(45deg) rotateY(45deg);
}

Diese Transformationen können in Kombination mit Animationen und Übergängen verwendet werden, um visuelle Effekte zu erzielen. Es ist zu beachten, dass die Browserunterstützung für 3D-Transformationen in CSS weit verbreitet ist, was sie zu einer leistungsstarken Möglichkeit macht, die Darstellung von Webseiten zu verbessern.

Im folgenden Abschnitt werden wir uns genauer mit "3D Transformationen mit Flipboxen" beschäftigen, einer speziellen Anwendung dieser Technik.

3D Transformationen mit Flipboxen

Innerhalb dieser 3D-Transformationen ragt die Idee der "Flipboxen" hervor. Eine Flipbox ist ein HTML-Element, das durch CSS-Regeln und 3D-Transformationen so gestaltet ist, dass es wie eine Karte um ihre eigene Achse kippt, um den Inhalt auf der Vorder- und Rückseite zu enthüllen. Diese Technik erzeugt einen Effekt, der an das Blättern von Karten erinnert und eine eindrucksvolle visuelle Erfahrung bietet.

3D Transformation vertikal

Folgend ist das Beispiel mitsamt Responsive und der Option zur Bildbeschriftung:

/* Styles für die Flipbox vertikal */

.flipbox-v {
    position: relative;
    perspective: 1500px;
    max-width: 504px;
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

/* Optionale Bildbeschriftung */

.caption-text-v {
    text-align: center;
    font-size: 0.85rem !important;
    position: relative;
    z-index: 2; /* Z-index für die Beschriftung, größer als der der Flipbox */
}

/* Flip-Effekt beim Hover */

.flipbox-v:hover .flipper-v,
.flipbox-v.hover .flipper-v {
    transform: rotateY(180deg);
}

/* Größenanpassungen für die Front-, Back- und Flipbox-Elemente */

.flipbox-v,
.front-v,
.back-v {
    width: 100%;
    height: 0;
    padding-bottom: 66.56%; /* Dies entspricht dem Seitenverhältnis 640x426 (426/640 * 100) */
}

/* Hintergrundbilder und Styles für die Front- und Back-Elemente */

.front-v {
    background: url(https://example.com/front-image.jpg) 0 0 no-repeat;
    background-size: cover;
}

.back-v {
    background: url(https://example.com/back-image.jpg) 0 0 no-repeat;
    background-size: cover;
}

.front-v,
.back-v {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Styling für den Flipper und Animationseffekt */

.flipper-v {
    position: relative;
    transition: 1s;
    transform-style: preserve-3d;
}

.front-v {
    transform: rotateY(0deg);
}

.back-v {
    transform: rotateY(180deg);
}

Bitte beachte, dass die Platzhalter-URLs (https://example.com/front-image.jpg und https://example.com/back-image.jpg) durch die tatsächlichen URLs für die Bilder zu ersetzen sind.

Flipboxen Responsiv

Beispiel mit max-width: 504px;, width: 100%; und padding-bottom: 66.56%;.

Im Selektor .flipbox ist die gewünschte Bildbreite mit max-width: 504px; festgelegt. Die Eigenschaften width: 100%; in den Selektoren .flipbox, .front und .back, sowie padding-bottom: 66.56%; sind entscheidend für die weitere Anpassung an verschiedene Bildschirmgrößen und gewährleisten ein responsives Design.

padding-bottom

Die Größe des Originalbilds ist relevant, wenn es um die Berechnung des Seitenverhältnisses für padding-bottom geht. Das padding-bottom wird genutzt, um den Container der Flipbox so zu dimensionieren, dass es das Seitenverhältnis des Bildes korrekt berücksichtigt. Bei der Berechnung des Prozentsatzes für padding-bottom zur Erzielung eines bestimmten Seitenverhältnisses sollte immer die Höhe durch die Breite geteilt werden, unabhängig davon, ob das Bild Hoch- oder Querformat hat.

Wenn du jedoch die Darstellung des Bildes auf der Webseite beeinflussen möchtest, spielt die tatsächliche Größe, die durch CSS-Anweisungen wie max-width: 504px; definiert wird, eine Rolle. Das max-width legt fest, wie breit das Bild maximal auf der Seite angezeigt wird, während das Seitenverhältnis mit padding-bottom die Höhe des Containers beeinflusst.

Um sicherzustellen, dass das Bild in der Flipbox korrekt angezeigt wird, ist es wichtig, das genaue Seitenverhältnis des Originalbilds für die Berechnung von padding-bottom zu verwenden. Die tatsächliche Größe, die durch CSS für die Darstellung festgelegt wird, beeinflusst lediglich, wie groß das Bild auf der Webseite erscheint, ohne das Seitenverhältnis zu beeinträchtigen. Die max-width Eigenschaft ermöglicht es, die Anzeigegröße zu steuern, während das ursprüngliche Seitenverhältnis erhalten bleibt.

• Die genauen Prozentsätze in padding-bottom sollten berechnet werden, da sie das Seitenverhältnis des Bildes widerspiegeln. Diese Prozentsätze bestimmen die Höhe des Containers relativ zur Breite und sind entscheidend, um sicherzustellen, dass das Bild im Container richtig angezeigt wird, ohne verzerrt zu wirken.
• Wenn das Seitenverhältnis im CSS nicht korrekt wiedergegeben wird, kann dies zu Verzerrungen führen, und das Bild könnte gestreckt oder gestaucht erscheinen.
• Die Genauigkeit der Kommastellen in der padding-bottom Berechnung hängt von deinen gestalterischen Anforderungen und Präferenzen ab. In der Praxis werden auch drei Dezimalstellen verwendet, um eine ausreichende Genauigkeit zu gewährleisten.
• Bei der Berechnung des Prozentsatzes für padding-bottom zur Erzielung eines bestimmten Seitenverhältnisses sollte immer die Höhe durch die Breite geteilt werden, unabhängig davon, ob das Bild Hoch- oder Querformat hat.

Beispiel, das Seitenverhältnis von 640 breit und 426 hoch:

426/640 = 0,666 x 100 ≈ 66,56%

Beispiel, das Seitenverhältnis von 426 hoch und 640 breit:

426/640 = 0,666 x 100 ≈ 66,56%

Bei der Umsetzung von Webdesigns kann es jedoch vorkommen, dass geringfügige Unterschiede aufgrund von Rundung und unterschiedlichen Bildschirmauflösungen auftreten. In den meisten Fällen sind diese Unterschiede jedoch vernachlässigbar und haben keinen wesentlichen Einfluss auf das Erscheinungsbild der Webseite.

Das HTML stellt die Flipbox bereit:

<div class="flipbox-v">
    <div class="flipper-v">
        <div class="front-v"></div>
        <div class="back-v"></div>
    </div>
</div>
<p class="caption-text-v">Optionale Bildbeschriftung</p>

Ein Danke an Jonas von kulturbanause (CSS Flip Animation – Objekte umdrehen) und mithilfe ChatGPT zur Responisität.

Ein paar Worte zur perspective

Die Eigenschaft perspective bei der Verwendung von 3D-Transformationen in CSS beeinflusst die Intensität der 3D-Effekte. Sie definiert die Entfernung zwischen dem Betrachter und dem Zentrum des 3D-Raums. Eine kleinere Perspektive führt zu einer stärkeren Verzerrung und einem ausgeprägteren 3D-Effekt, während eine größere Perspektive zu einer geringeren Verzerrung führt.

Bei der Einstellung von perspective solltest du experimentieren, um den gewünschten visuellen Effekt zu erzielen. In Bezug auf das Beispiel mit einer maximalen Bildbreite von 504px könnten den Werten zwischen 1000px und 2000px für normalen Flip passen. Für ausgeprägteren 3D-Effekt sind hier Werte um die 500px. Hierbei ist es wichtig, dass die Perspektive den gewünschten visuellen Effekt und die Gesamterscheinung der Webseite unterstützt.

Das folgende Beispiel ist statt perspective: 1500px; mit perspective: 500px;

Illustation geralt; Smiley Conmongt

3D Transformation horizontal

Nun möchten wir auch versuchen, den Flip von horizontal auf vertikal zu ändern. Dies gestaltete sich hier nicht so einfach in Bezug auf die Responsivität, im Gegensatz zu den sonst leicht anzupassenden Methoden, wie beispielsweise transform: rotateY(180deg);, welches durch transform: rotateX(180deg); ersetzt wurde.

Das CSS der Beispiele sollten gründlich überarbeitet werden. Hier ist das Ergebnis und auch für Browser Firefox konform:

/* --- Styles für die Flipbox horizontal --- */

.flipbox-h {
    position: relative;
    perspective: 1500px;
    max-width: 504px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

/* Optionale Bildbeschriftung */
.caption-text-h {
    margin-top: 5px;
    text-align: center;
    font-size: 0.85rem !important;
    position: relative;
    z-index: 2; /* Z-index für die Beschriftung, größer als der der Flipbox */
}

/* Flip-Effekt beim Hover */
.flipbox-h:hover .flipper-h,
.flipbox-h.hover .flipper-h {
    transform: rotateX(180deg);
}

/* Größenanpassungen für die Front-, Back- und Flipbox-Elemente */
.flipbox-h,
.front-h,
.back-h {
    width: 100%;
    height: 0;
    padding-bottom: 66.56%;
    margin: auto;
}

/* Hintergrundbilder und Styles für die Front- und Back-Elemente */
.front-h {
    background: url(https://example.com/front-image.jpg) 0 0 no-repeat;
    background-size: cover;
}

.back-h {
    background: url(https://example.com/back-image.jpg) 0 0 no-repeat;
    background-size: cover;
}

.front-h,
.back-h {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-origin: center center;
}

.flipper-h {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.front-h {
    transform: rotateX(0deg);
}

.back-h {
    transform: rotateX(180deg);
}

/* - Ende Styles für die Flipbox horizontal - */

Das HTML:

<div class="flipbox-h">
    <div class="flipper-h">
        <div class="front-h"></div>
        <div class="back-h"></div>
    </div>
</div>
<p class="caption-text-h">Optionale Bildbeschriftung</p>

Unterschiede:

1. Die Rotationsachsen (rotateX und rotateY) sind unterschiedlich, um den Flip in unterschiedliche Richtungen zu ermöglichen. Die vertikale Flipbox verwendet rotateY, während die horizontale Flipbox rotateX für den Flip-Effekt verwendet.
2. Die Positionierung des .flipper-v ist relativ, während die horizontale Flipbox absolute verwendet und die vertikale Flipbox nicht.

Das Beispiel befindet sich am Anfang des Beitrags ↑

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 August