CSS3是Web設計中非常重要的一部分，其中包含了很多讓網頁效果更加豐富的功能。其中一個重要的功能就是側邊展示div，下面我們就通過pre標簽來展示一下具體的代碼實現。

.sidebar {
position: fixed;
top: 0;
bottom: 0;
width: 250px;
background-color: #f1f1f1;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.sidebar.open {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu-open {
position: fixed;
right: 0;
top: 15px;
width: 36px;
height: 36px;
background-color: #f1f1f1;
border-radius: 50%;
text-align: center;
line-height: 36px;
color: #444;
z-index: 1000;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.menu-open:hover {
background-color: #444;
color: #fff;
}

通過上述代碼的實現，我們可以看到主要是使用了translateX對側邊欄進行位置的控制，然后使用transition對其進行滑出的效果實現。同時，還包含了一些鼠標懸停后的樣式變化。

總的來說，CSS3的側邊展示div功能非常方便實用，可以在網頁設計中大大增加用戶體驗，開發人員不妨嘗試一下。