CSS3畫卷展開應用于網頁設計中，可以增加頁面的美觀程度和用戶體驗。下面將通過代碼實現畫卷展開效果。

.expand{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #FFDAB9;
position: relative;
overflow: hidden;
cursor: pointer;
}
.expand:before{
content: " ";
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -1px;
width: 20px;
height: 2px;
background-color: #4D4D4D;
}
.expand:after{
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFDAB9;
transform-origin: left top;
transform: rotate(-45deg) scale(0);
transition: transform .3s ease-in-out;
}
.expand.active:after{
transform: rotate(0) scale(1);
}

以上是CSS代碼，下面是HTML代碼。

展開

以上代碼中，先定義了畫卷的基本樣式，包括寬度、高度、圓角等屬性。然后通過:before和:after偽元素生成畫卷中的圖案和效果。通過設置overflow:hidden屬性，讓畫卷在默認情況下，只顯示出畫卷圖案。

為展開畫卷綁定事件，在按下畫卷時，添加.active類，觸發active狀態的展開效果。

這是一種簡單的畫卷展開效果，可以在實際項目中應用，使頁面更加美觀。