原文地址：https://segmentfault.com/a/1190000014751037

HTML代碼:

<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>

CSS代碼：

html, body {
    margin: 0;
    padding: 0;
    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: 0;
    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: 0;
    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: 0;
    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;
}

.14純 CSS 創作一種側立圖書的特效