CSS3是一種用于美化網(wǎng)頁的技術(shù)，能夠使網(wǎng)頁更加生動(dòng)、美觀，其中的打開書效果常常被網(wǎng)頁設(shè)計(jì)師所采用，非常適合用來呈現(xiàn)文章。

.book{
position: relative;
width: 400px;
height: 270px;
margin: 0 auto;
perspective: 1000px;
transform-style: preserve-3d;
transition: all 1s ease;
cursor: pointer;
}
.book:hover{
transform: rotateY(-180deg);
}
.front, .back{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,.5);
}
.back{
transform: rotateY(-180deg);
padding: 20px;
text-align: justify;
font-size: 16px;
line-height: 24px;
overflow: auto;
}

首先，我們需要定義一個(gè)book類，用于顯示打開書效果的容器。在該類中，我們?cè)O(shè)置了容器的寬度、高度、位置和視點(diǎn)距離，以及transition屬性用于使容器有動(dòng)態(tài)效果，在鼠標(biāo)懸停時(shí)能夠顯示打開書的效果。同時(shí)，我們還為容器設(shè)置了鼠標(biāo)光標(biāo)樣式為手型。

接下來，我們定義容器的前面和后面兩個(gè)面front和back，其中后面的面會(huì)被旋轉(zhuǎn)，用于展示文章內(nèi)容。我們?cè)O(shè)置了每個(gè)面的樣式，其中-webkit-backface-visibility和backface-visibility屬性用于防止在旋轉(zhuǎn)時(shí)出現(xiàn)奇怪的黑色區(qū)域。

最后，在back面中，我們可以定義文章的具體樣式。在該例子中，我們?cè)O(shè)置了字體大小為16px，行高為24px，并使用padding屬性設(shè)置文字離容器的邊緣距離。對(duì)于超出容器大小的內(nèi)容，我們使用了overflow:auto屬性，這樣可以在需要的時(shí)候出現(xiàn)滾動(dòng)條。

這樣，一個(gè)簡(jiǎn)單的打開書效果就完成了！你可以按照上述代碼進(jìn)行參考，自己制作一個(gè)非常棒的打開書效果！