CSS3的層疊陰影技術(shù)可以制作出很多酷炫的效果,比如模擬書本效果。
.book { position: relative; width: 300px; height: 400px; margin: 50px auto; padding: 50px; background-color: #fff; box-shadow: 0 0 0 10px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.5), 0 4px 4px rgba(0,0,0,0.5), 0 8px 8px rgba(0,0,0,0.5), 0 16px 16px rgba(0,0,0,0.5); border-radius: 10px; } .book:before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 60px; background-color: rgba(0,0,0,0.2); transform-origin: right; transform: perspective(200px) rotateY(-10deg); } .book:after { content: ""; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background-color: rgba(0,0,0,0.2); transform-origin: left; transform: perspective(200px) rotateY(10deg); }
以上就是制作書本效果的CSS代碼,其中book類是主體框架,使用了層疊陰影(box-shadow)技術(shù)來制作出書本的凸起和陰影效果。而:before和:after是偽元素,分別用來制作書本的左右封面,使用了三維轉(zhuǎn)換(tranform)的rotateY屬性來模擬他們的翻轉(zhuǎn)效果。