CSS3的旋轉(zhuǎn)效果確實(shí)非常吸引人，今天我們要給大家推薦的就是基于CSS3實(shí)現(xiàn)的旋轉(zhuǎn)書(shū)架。這個(gè)書(shū)架不僅僅能夠旋轉(zhuǎn)，還能夠展示多個(gè)書(shū)籍，非常適合用于書(shū)店或者書(shū)籍推薦網(wǎng)站中。

首先，我們來(lái)看一下這個(gè)旋轉(zhuǎn)書(shū)架的效果。代碼如下：

.bookshelf {
display: flex;
justify-content: center;
align-items: center;
perspective: 500px;
}
.book {
position: absolute;
bottom: 0;
box-shadow: 0 0 20px rgba(0,0,0,.3);
width:35%;
height:65%;
transition: transform .5s ease;
}
.book:nth-child(1) {
background-image: url('book1.png');
background-size: cover;
z-index: 3;
}
.book:nth-child(2) {
background-image: url('book2.png');
background-size: cover;
transform: translateX(-180%) rotateY(-40deg);
z-index: 2;
}
.book:nth-child(3) {
background-image: url('book3.png');
background-size: cover;
transform: translateX(-360%) rotateY(-80deg);
z-index: 1;
}
.book:nth-child(4) {
background-image: url('book4.png');
background-size: cover;
transform: translateX(180%) rotateY(40deg);
z-index: 2;
}
.book:nth-child(5) {
background-image: url('book5.png');
background-size: cover;
transform: translateX(360%) rotateY(80deg);
z-index: 1;
}
.book:hover {
transform: translateY(-20px) scale(1.1);
}

代碼的邏輯非常簡(jiǎn)單，通過(guò)絕對(duì)定位的方式將書(shū)籍放置在底部，通過(guò)translateX和rotateY來(lái)控制書(shū)籍的位置和旋轉(zhuǎn)角度，通過(guò):hover來(lái)實(shí)現(xiàn)鼠標(biāo)懸停時(shí)的放大效果。

不過(guò)，請(qǐng)注意，由于CSS3旋轉(zhuǎn)效果還有瀏覽器兼容性問(wèn)題，兼容性并不好，因此我們建議在使用前要對(duì)不同瀏覽器的兼容性進(jìn)行測(cè)試。

總的來(lái)說(shuō)，這個(gè)基于CSS3實(shí)現(xiàn)的旋轉(zhuǎn)書(shū)架是一款非常優(yōu)秀的設(shè)計(jì)，我們希望大家可以在項(xiàng)目中嘗試運(yùn)用。