CodePen Embed - QA: https://qna.habr.com/q/1196970

<ul class="align">
  <li>
    <figure class='book'>
      <!-- Front -->
      <ul class='hardcover_front'>
        <li>
          <img src="https://tympanus.net/Development/AnimatedBooks/img/cover.jpg" alt="" width="100%" height="100%">
        </li>
        <li></li>
      </ul>
      <!-- Pages -->
      <ul class='page'>
        <li></li>
        <li>
          <span class="book-content">
            <img src="//via.placeholder.com/50x50" width="100%" height="100%" class="img-fluid rounded-circle" alt="author">
            <span class="title-author"> Автор книги
              <br>
              КИНГ Р.C.
            </span>
          </span>
        </li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <!-- Back -->
      <ul class='hardcover_back'>
        <li></li>
        <li></li>
      </ul>
      <ul class='book_spine'>
        <li></li>
        <li></li>
      </ul>
    </figure>
  </li>
</ul>

/*
  A. Mini Reset 
*/
*,
*:after,
*:before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

::before,
::after {
  content: "";
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* basic grid, only for this demo */

.align {
  clear: both;
  margin: 90px auto 20px;
  width: 100%;
  max-width: 1170px;
  text-align: center;
}

.align > li {
  width: 500px;
  display: inline-block;
  margin: 30px 20px 30px 30px;
  padding: 0 0 0 60px;
  vertical-align: top;
}

/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events
6. Bonus
  - Cover design
  - Ribbon
  - Figcaption
7. mini-reset

/////////////////////////////////////////////////////*/

/*
  1. container
*/

.book {
  position: relative;
/*   width: 160px;
  height: 220px; */
  width: 80px;
  height: 110px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.rounded-circle {
  margin: 0 auto;
  display: block;
  max-width: 70px;
  border-radius: 50%;
  width: 100%;
  height: auto;
}
.title-author {
  margin: 10px 0 0;
  text-transform: uppercase;
  font-size: 10px;
  display: block;
}
.book-content {
  text-align: center;
  margin-top: 55px;
  margin-bottom: 0;
  display: block;
}

/*
  2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
  background-color: #289d96;
  backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
  background: #289d96;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
  background: #289d96;
}

/* reverse */
.hardcover_back li:last-child {
  background: #289d96;
}

.book_spine li:first-child {
  background: #289d96;
}
.book_spine li:last-child {
  background: #289d96;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  background: #289d96;
}

/* page */

.page > li {
  background: linear-gradient(to left, #e1ddd8 0%, #fffbf6 100%);
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1),
    inset -1px 0px 1px rgba(150, 150, 150, 0.2);
  border-radius: 0px 5px 5px 0px;
}

/*
  3. opening cover, back cover and pages
*/

.hardcover_front {
  transform: rotateY(-34deg) translateZ(8px);
  z-index: 100;
}

.hardcover_back {
  transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
  transform: rotateY(-28deg);
}

.page li:nth-child(2) {
  transform: rotateY(-30deg);
}

.page li:nth-child(3) {
  transform: rotateY(-32deg);
}

.page li:nth-child(4) {
  transform: rotateY(-34deg);
}

.page li:nth-child(5) {
  transform: rotateY(-36deg);
}

/*
  4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
  transform-origin: 0% 100%;
}

.hardcover_front {
  transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
  cursor: default;
  user-select: none;
  transform: translateZ(2px);
}

.hardcover_front li:last-child {
  transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
  transform: translateZ(2px);
}

.hardcover_back li:last-child {
  transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  position: absolute;
  top: 0;
  left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
  width: 4px;
  height: 100%;
  transform-origin: 0% 50%;
}

.hardcover_front li:first-child:after {
  transform: rotateY(90deg);
}

.hardcover_front li:first-child:before {
  transform: rotateY(90deg);
  left: auto;
  right: 0;
}

.hardcover_front li:last-child:before {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  box-shadow: 0px 0px 30px 5px #333;
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
  width: 4px;
  height: 100%;
}

.hardcover_back li:first-child:after {
  transform: rotateY(90deg);
  left: -2px;
}

.hardcover_back li:first-child:before {
  transform: rotateY(90deg);
  right: -2px;
  left: auto;
}

.hardcover_back li:last-child:before {
  top: auto;
  bottom: 0;
  width: 100%;
  height: 4px;
  box-shadow: 10px -1px 80px 20px #666;
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
}

/* BOOK SPINE */
.book_spine {
  transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  width: 16px;
  z-index: 0;
}

.book_spine li:first-child {
  transform: translateZ(2px);
}

.book_spine li:last-child {
  transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
  width: 4px;
  height: 100%;
}

.book_spine li:first-child:after {
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
  transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
  width: 4px;
  height: 16px;
}

.book_spine li:last-child:after {
  transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px)
    translateY(-6px);
}

.book_spine li:last-child:before {
  box-shadow: 5px -1px 100px 40px rgb(0 0 0 / 20%);
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
  top: auto;
  bottom: 0;
}

.page,
.page > li {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}

.page {
  width: 100%;
  height: 98%;
  top: 1%;
  left: 3%;
  z-index: 10;
}

.page > li {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition-property: transform;
  transition-timing-function: ease;
}

.page > li:nth-child(1) {
  transition-duration: 0.6s;
}

.page > li:nth-child(2) {
  transition-duration: 0.6s;
}

.page > li:nth-child(3) {
  transition-duration: 0.4s;
}

.page > li:nth-child(4) {
  transition-duration: 0.5s;
}

.page > li:nth-child(5) {
  transition-duration: 0.6s;
}

/*
  5. events
*/

.book:hover > .hardcover_front {
  transform: rotateY(-145deg) translateZ(0);
  z-index: 0;
}

.book:hover > .page li:nth-child(1) {
  transform: rotateY(-30deg);
  transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
  transform: rotateY(-35deg);
  transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
  transform: rotateY(-118deg);
  transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
  transform: rotateY(-130deg);
  transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
  transform: rotateY(-140deg);
  transition-duration: 1.2s;
}

This Pen is owned by RAX7 on CodePen. It is a fork of this Pen.

See more by @RAX7 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.