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.
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.
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.
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.
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;
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:
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.
Die Positionierung des .flipper-v ist relativ, während die horizontale Flipbox absolute verwendet und die vertikale Flipbox nicht.
Die top-Position für den Flipper ist bei der horizontalen Flipbox auf 40% eingestellt, während die vertikale Flipbox ohne auskommt.
Die vertikale Flipbox (.flipbox-v) verwendet margin-top und margin-bottom für den äußeren Container, während die horizontale Flipbox diese Margin-Anpassungen nicht aufweist. Diese margin-Anpassungen in der vertikalen Variante haben Auswirkungen auf die vertikale Positionierung und das äußere Erscheinungsbild der Flipbox in Bezug auf den umgebenden Raum.
In der horizontalen Flipbox sind diese margin-Anpassungen nicht möglich und der Abstand wird hier im Selektor (.flipper-h) durch top: 50%; festgelegt.
Das Beispiel befindet sich am Anfang des Beitrags ↑
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Hinweis: Unsere Website verwendet ausschließlich funktionale Cookies und setzt keine Cookies von Drittanbietern.
Aber hallo!
– zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Technische Herausforderungen sind Teil des Website-Betriebs. Wir interessieren uns dafür, wie du mit solchen Problemen umgehst. Bitte teile uns mit, ob du bereits technische Probleme auf deiner Website hattest und wie du sie gelöst hast.
Wird geladen ...
Während deines Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
