css实现翻书效果（css实现翻页效果）

```html

```

## CSS样式

接下来，我们需要通过CSS为页面内容添加样式，并实现翻书效果。首先，我们需要定义书籍的样式，使其具有一定的宽度和高度，并隐藏溢出内容：

```css

.book {

width: 300px;

height: 400px;

position: relative;

perspective: 1000px;

margin: 50px auto;

border: 1px solid #ccc;

overflow: hidden;

```

然后，我们为每个页面内容添加样式，使其具有默认的绝对定位和背面效果：

```css

.page {

width: 50%;

height: 100%;

position: absolute;

transition: transform 1s;

background-color: #fff;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

.page1 {

left: 0;

transform-origin: left center;

.page2 {

right: 0;

transform-origin: right center;

transform: rotateY(-180deg);

```

## JavaScript交互

最后，我们可以通过JavaScript来增加交互效果，使得用户可以通过点击或拖动来翻页。这里以点击鼠标左键为例，实现向后翻页的效果：

```javascript

let book = document.querySelector('.book');

let currentPage = 1;

book.addEventListener('click', () => {

if (currentPage === 1) {

book.querySelector('.page1').style.transform = 'rotateY(-180deg)';

book.querySelector('.page2').style.transform = 'rotateY(0deg)';

currentPage = 2;

} else {

book.querySelector('.page1').style.transform = 'rotateY(0deg)';

book.querySelector('.page2').style.transform = 'rotateY(-180deg)';

currentPage = 1;

}

});

```

通过以上HTML结构、CSS样式和JavaScript交互代码，我们就可以实现一个简单的翻书效果。读者可以根据需求进一步优化和扩展该效果，为网页增添更多动感和视觉吸引力。