<div class="books">

     <div class="book html">

          <span>HTML</span>

     </div>

     <div class="book css">

          <span>CSS</span>

     </div>

     <div class="book js">

          <span>JavaScript</span>

     </div>

</div>

html, body {

    margin:;

    padding:;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(to top left,white,dimgray);

}

/* 3本书布局 */

.books{

    display: flex;

    width: calc(12rem * 3 + 3rem * 2);

    justify-content: space-between;

    margin-top: 6rem;

}

.book:nth-child(2){

    top: -3rem;

}

.book:nth-child(3){

    top: -6rem;

}

/* 画出书的正面 */

.book{

    position: relative;

    width: 12rem;

    height: 18rem;

    transform: skewY(-10deg);

    background: linear-gradient(navy, deeppink, tomato);

    /* 给图书加阴影，让它显得更立体 */

    box-shadow: -10px 5px 30px rgba(0,0,0,0.5);

    transition: 0.3s;

}

/* 画出书的侧面 */

.book::before{

    content: '';

    position: absolute;

    width: 1.5rem;

    height: 100%;

    background: linear-gradient(navy, deeppink, tomato);

    top:;

    left: -1.5rem;

    transform: skewY(45deg);

    transform-origin: right;

    filter: brightness(0.6);

}

/* 画出书的顶面 */

.book::after{

    content: '';

    position: absolute;

    width: 100%;

    height: 1.5rem;

    background: white;

    top: -1.5rem;

    left:;

    transform-origin: bottom;

    transform: skewX(45deg);

    filter: brightness(0.9);

}

/* 设置文字样式 */

.book span{

    position: absolute;

    font-size: 2.2rem;

    font-family: sans-serif;

    width: 100%;

    height: 8rem;

    display: block;

    text-align: center;

    margin-top: 5rem;

    padding-top: 2rem;

    box-sizing: border-box;

    text-shadow: -2px 2px 10px rgba(0,0,0,0.3);

    background: silver;

}

/* 画出文字侧面，与画图书侧面的方法相似 */

.book span::before{

    content: '';

    position: absolute;

    width: 1.5rem;

    height: 100%;

    background: silver;

    top:;

    left: -1.5rem;

    transform-origin: right;

    transform: skewY(45deg);

    filter: brightness(0.6);

}

/* 文字下增加一行小字号文字 */

.book span::after{

    display: block;

    font-size: 1rem;

}

/* 3本书配色 */

.book.html span,

.book.html span::before {

    background: orange;

}

.book.css span,

.book.css span::before {

    background: yellowgreen;

}

.book.js span,

.book.js span::before {

    background: royalblue;

}

/* 设置 3 本书的小字号文字 */

.book.html span:after {

    content: '<devolopment />';

}

.book.css span::after {

    content: '.devolopment::';

}

.book.js span::after {

    content: '{ devolopment }';

}

/* 为图书增加鼠标划过效果 */

.book:hover {

    margin-top: -1.5rem;

}