.14纯 CSS 创作一种侧立图书的特效

<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: 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;}