3D Book Opening Text
A closed book swings its cover open on the spine to show the first line inside, holds, then closes again. The cover is a two-sided preserve-3d panel, and the book slides over to stay centered.
Also known as: book open animation css, 3d book cover text, opening book effect.
It all began
right here.
HTML
<div class="txt-book-opening-text">
<div class="txt-book-opening-text-book">
<div class="txt-book-opening-text-page"><p>It all began<br>right here.</p></div>
<div class="txt-book-opening-text-cover" aria-hidden="true">
<span class="txt-book-opening-text-front">Chapter<br>One</span>
<span class="txt-book-opening-text-back"></span>
</div>
</div>
</div>CSS
.txt-book-opening-text {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: inline-block;
perspective: 20em;
font-family: ui-serif, Georgia, serif;}
.txt-book-opening-text-book {
display: grid;
transform-style: preserve-3d;
animation: txt-book-opening-text-center 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-book-opening-text-page,
.txt-book-opening-text-cover {
grid-area: 1 / 1;
width: 3.6em;
height: 4.4em;
}
/* the first page, printed with a few faint ruled lines */
.txt-book-opening-text-page {
display: flex;
align-items: center;
border-radius: 0 0.14em 0.14em 0;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
background:
repeating-linear-gradient(transparent 0 0.57em, color-mix(in srgb, var(--c) 14%, transparent) 0.57em 0.6em) 0 0.4em / 100% calc(100% - 0.8em) no-repeat,
color-mix(in srgb, var(--c) 8%, #fff);
}
.txt-book-opening-text-page p {
margin: 0;
padding: 0 0.7em;
font-size: 0.55em;
font-style: italic;
line-height: 1.4;
color: var(--c);
}
.txt-book-opening-text-cover {
display: grid;
transform-origin: 0 50%; /* the spine */
transform-style: preserve-3d;
animation: txt-book-opening-text-open 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-book-opening-text-front,
.txt-book-opening-text-back {
grid-area: 1 / 1;
border-radius: 0 0.14em 0.14em 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.txt-book-opening-text-front {
display: grid;
place-items: center;
font-size: 0.75em;
font-weight: 700;
line-height: 1.1;
text-align: center;
color: #fff;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000) 0 0.25em, var(--c) 0.25em);
}
.txt-book-opening-text-back {
transform: rotateY(180deg);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
background: color-mix(in srgb, var(--c) 14%, #fff);
}
@keyframes txt-book-opening-text-open {
0%, 16% { transform: rotateY(0deg); }
46%, 76% { transform: rotateY(-168deg); }
100% { transform: rotateY(0deg); }
}
/* slide right by half a cover while open, so the spread stays centered */
@keyframes txt-book-opening-text-center {
0%, 16% { transform: rotateX(12deg) translateX(0); }
46%, 76% { transform: rotateX(12deg) translateX(1.8em); }
100% { transform: rotateX(12deg) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.txt-book-opening-text, .txt-book-opening-text *, .txt-book-opening-text::before, .txt-book-opening-text::after, .txt-book-opening-text *::before, .txt-book-opening-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.