CSS Book Flip
In diesem Tutorial zeige ich Dir wie Du mit HTML und CSS ein Flip-Book in Divi erstellen kannst.
Die Farben, Bilder und Texte kannst Du dann nach belieben anpassen.
CSS Book Flip
Hier eine Beschreibung oder ein Bild etc...
Hier ein Text/Bild oder Button
Schritt für Schritt Anleitung
- Erstelle eine neue Seite mit der passenden Überschrift
- Erstelle eine neue Zeile (grüner Rahmen)
- In die neue Zeile fügst Du ein Code-Modul
- Setze folgenden Code ein
Code-Modul
CSS Book Flip
Hier eine Beschreibung oder ein Bild etc...
![]()
Hier ein Text/Bild oder Button
5. Kopiere den CSS-Code und fügen ihn in das Benutzerdefiniertes CSS ein, entweder direkt in Divi-> Benutzerdefiniertes CSS oder auf deine neu erstellten Seite.
CSS-Code
.ud_book_box {
position: relative;
top:175px;
left:35%;
right:33%;
transform: translate(-50%,-50%);
height: 350px;
width: 250px;
perspective: 1800px;
}
.ud_book {
position: absolut;
top:0;
left:0;
width: 100%;
height: 100%;
background: #044793;
transform-style: preserve-3d;
transform: rotate3d(0, 1, 0, 45deg);
transition: all 300ms;
box-shadow: 1px 2px 25px rgba(2,2,2,0.29);
border-radius: 0px 50px 0px 10px ;
}
.ud_book:hover {
transform: rotate3d(0, 1, 0, 0);
}
.ud_ruckseite {
position: absolute;
top: 0;
left: 0;
background: #044793;
height: 100%;
width: 60px;
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: rotate3d(0, 1, 0, -86deg) translate3d(-100%, 0px, 0);
border-left: 2px solid #044793;
border-right: 1px solid #044793;
/* border-top: 1px solid #e8e7e7;*/
border-bottom: 1px solid #e8e7e7;
box-shadow: 1px 2px 25px rgba(2,2,2,0.19);
}
.ud_ruckseite div {
position: absolute;
bottom:0;
left: 0;
height: 100px;
background: #f3f3f3;
width: 100%;
/* border-right: 5px solid #044793;*/
}
.ud_cover {
background: #ffffff;
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
left:0;
border-left: 1px solid #044793;
}
.ud_cover p {
/* font-family: 'Oswald', sans-serif;*/
padding:0px 20px 0 20px;
}
h4 {
padding: 2px;
margin: 20px 0 0 20px;
font-size: 30px;
text-transform: uppercase;
/*font-family: 'Oswald', sans-serif;*/
font-weight: bold;
position: absolute;
color: #ededed;
}
h5 {
padding: 5px;
margin: 30px 0 0 30px;
font-size: 20px;
/*font-family: 'Oswald', sans-serif;*/
/*font-weight: bold;*/
position: absolute;
color: #ededed;
}7. Den CSS-Code kannst Du dann nach belieben ändern, z.B. eine andere Hintergrundfarbe, ein Bild einfügen oder einfach nur den Text ändern.
Viel Spaß beim Nachbauen!