Pure CSS 3D Flipping Book with Animations
What is Pure CSS 3D Flipping Book?
Pure CSS 3D Flipping Book is a pure CSS and HTML flipping book animation that you can use to display content in a virtual book format.
Preview
a preview of Pure CSS 3D Flipping Book
About the CSS Transform Property
CSS3's transform property allows you to modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.
The coordinate space of an element is the space in which its position and size are calculated. Normally, the position and size of an element are calculated in the coordinate space of its parent element, but the transform property allows you to change that.
For example, if you translate an element by 50px to the right and 100px down, its position will be calculated as if it were 50px to the right and 100px down from its parent element.
Pure CSS 3D Flipping Book with Animations Demo
View Demo Full Screen View Demo New Tab
Pure CSS 3D Flipping Book with Animations Code
HTML
<div class="book">
<!-- For Next/Prev Controls -->
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<!-- Book Cover -->
<div id="cover">
<img src="https://picsum.photos/250/400?random=0.1285591640803374" alt="Cover">
</div>
<!-- Pages -->
<div class="flip-book">
<!-- Page 1 -->
<div class="flip" id="p1">
<div class="back">
<img src="https://picsum.photos/250/400?random=0.2" alt="">
<label for="c1" class="back-btn">Before</label>
</div>
<div class="front">
<h2>Page 1</h2>
<label for="c1" class="next-btn">NEXT</label>
</div>
</div>
<!-- Page 2 -->
<div class="flip" id="p2">
<div class="back">
<img src="https://picsum.photos/250/400?random=0.3" alt="">
<label for="c2" class="back-btn">Before</label>
</div>
<div class="front">
<h2>Page 2</h2>
<label for="c2" class="next-btn">NEXT</label>
</div>
</div>
<!-- Page 3 -->
<div class="flip" id="p3">
<div class="back">
<label for="c3" class="back-btn">Before</label>
</div>
<div class="front">
<h2>Page 3</h2>
<label for="c3" class="next-btn">NEXT</label>
</div>
</div>
</div>
</div>
CSS
.book {
display: flex;
}
#cover {
width: 250px;
height: 400px;
}
.flip-book {
width: 250px;
height: 400px;
position: relative;
perspective: 1500px;
}
.flip {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: .5s;
color: #000;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;
}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #000;
}
.next-btn {
position: absolute;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #fff;
}
#p1 {
z-index: 3;
}
#p2 {
z-index: 2;
}
#p3 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}