bookshelf.css

@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
:root {
  --argyle: repeating-linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 60px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 60px
    ),
    linear-gradient(
      60deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    );
  background-size: 70px 120px;
  --tartan: repeating-linear-gradient(
      transparent,
      transparent 50px,
      rgba(0, 0, 0, 0.1) 50px,
      rgba(0, 0, 0, 0.1) 53px,
      transparent 53px,
      transparent 63px,
      rgba(0, 0, 0, 0.1) 63px,
      rgba(0, 0, 0, 0.1) 66px,
      transparent 66px,
      transparent 116px,
      rgba(0, 0, 0, 0.1) 116px,
      rgba(0, 0, 0, 0.1) 166px,
      rgba(0, 0, 0, 0.1) 166px,
      rgba(0, 0, 0, 0.1) 169px,
      rgba(0, 0, 0, 0.2) 169px,
      rgba(0, 0, 0, 0.2) 179px,
      rgba(0, 0, 0, 0.1) 179px,
      rgba(0, 0, 0, 0.1) 182px,
      rgba(0, 0, 0, 0.1) 182px,
      rgba(0, 0, 0, 0.1) 232px,
      transparent 232px
    ),
    repeating-linear-gradient(
      270deg,
      transparent,
      transparent 50px,
      rgba(0, 0, 0, 0.3) 50px,
      rgba(0, 0, 0, 0.3) 53px,
      transparent 53px,
      transparent 63px,
      rgba(0, 0, 0, 0.3) 63px,
      rgba(0, 0, 0, 0.3) 66px,
      transparent 66px,
      transparent 116px,
      rgba(0, 0, 0, 0.2) 116px,
      rgba(0, 0, 0, 0.2) 166px,
      rgba(0, 0, 0, 0.1) 166px,
      rgba(0, 0, 0, 0.1) 169px,
      rgba(0, 0, 0, 0.1) 169px,
      rgba(0, 0, 0, 0.1) 179px,
      rgba(0, 0, 0, 0.1) 179px,
      rgba(0, 0, 0, 0.1) 182px,
      rgba(0, 0, 0, 0.1) 182px,
      rgba(0, 0, 0, 0.1) 232px,
      transparent 232px
    ),
    repeating-linear-gradient(
      125deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.2) 2px,
      rgba(0, 0, 0, 0.2) 3px,
      transparent 3px,
      transparent 5px,
      rgba(0, 0, 0, 0.2) 5px
    );

}

.bookshelf {
  width: 100%;
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-style: dotted;
  border-color: GRAY;
  border-top: 1px;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  margin-left: 1px;
  margin-bottom: 10px;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  border-radius: 3px;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  position: relative;
  width: 50px;
  height: 240px;
  /* Patterns from: https://projects.verou.me/css3patterns/ */
  background-image: var(--argyle);
  transform: rotateY(0deg) translateZ(0px);
}

.spine-title {
  margin: 6px;
  margin-bottom: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 18px;
  color: black;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: Ubuntu;
  font-weight: bold;
}

.spine-author {
  position: absolute;
  color: black;
  font-size: 9px;
  bottom: 2px;
  text-align: center;
  right: 10%; /* no idea why 20% centers it */
  font-family: Ubuntu;
  font-weight: normal;
}

.top {
  width: 50px;
  height: 190px;
  top: -2px; /* hmm, why -2 and not 0? */
  background-image: linear-gradient(90deg, black 90%, lightGray 10%);
  background-size: 5px 5px;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  top: 0px;
  /* background-image: url("https://picsum.photos/190/280"); */
  background-image: var(--tablecloth);
  background-color: white;
  background-size: contain;
  background-repeat: round;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.coverTitle{

  padding-top: 25px;

}

.coverAuthor{

  padding-top: 165px;
}

.book:hover {
  z-index: 1;
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px)
    translateX(-30px);
}


body {
  font-family: Ubuntu;
  background-color: whitesmoke;
  text-align: center;
}