CSS3立體貨架效果是一種非常實用、美觀的網頁設計效果，它可以讓網站變得更生動、更有層次感。以下將介紹CSS3立體貨架效果的實現方法。

.shelf {
position: relative;
margin: 0 auto;
width: 400px;
height: 600px;
perspective: 1000px;
}
.shelf__box {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 200px;
height: 400px;
transform-style: preserve-3d;
transition: transform 1s;
}
.shelf__front {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2f4858;
transform: translateY(200px) rotateX(-90deg);
}
.shelf__back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
transform: translateY(-200px) rotateX(90deg);
}
.shelf__left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 20px;
background-color: #4a677d;
transform: translateX(-100px) rotateY(-90deg);
}
.shelf__right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background-color: #4a677d;
transform: translateX(100px) rotateY(90deg);
}
.shelf:hover .shelf__box {
transform: rotateX(-60deg);
}

首先，需要在HTML中創建一個包含整個立體貨架的容器，使用CSS中的perspective屬性設置透視效果，再將立體貨架放入其中。接著，需要將立體貨架的各個面拆分出來，分別設置不同的CSS樣式，使用translate和rotate屬性調整它們的位置和角度，最后使用transform-style屬性設置為preserve-3d，讓它們的變換都圍繞立體軸進行。最后，使用:hover偽類，使立體貨架在鼠標懸停時發生動畫效果，可以讓網站更加生動有趣。