css翻书动画效果 |ie9加载不了css

.book {
position: relative;
perspective: 1000px;
}
.book-page {
position: absolute;
width: 50%;
height: 100%;
top: 0;
background-color: #ffcccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.page-right {
left: 50%;
transform-origin: left;
transform: rotateY(-30deg);
}
.page-left {
transform-origin: right;
transform: rotateY(30deg);
}
.flip-book {
transition: transform 1s ease;
}
.flip-book.flipped {
transform: rotateY(-180deg);
}

代码解析：

首先创建一个书的父容器，将其设为相对定位，并且设置3D透视效果。接着创建两个背景颜色为粉色的子元素，它们的宽度为父元素的一半，高度为父元素高度，位置为绝对定位。然后将右侧页面元素的左边框设为父元素的中心位置，左侧页面的transform-origin属性设为右侧，角度为30度。同理，将左侧页面元素右边框设为父元素中心位置，右侧页面的transform-origin属性设为左侧，角度为-30度。同时，为实现翻书动画效果，需要给父元素的子元素们一个共有的类，名为.flip-book，并且定义一个flipped类，它会将元素3D翻转180度（rotateY(-180deg)的方式）。

这部分代码实现了翻页效果的静态样式，接下来大家将它与JavaScript相结合，实现动态翻页效果。具体实现方式可以参考下面代码：

var book = document.querySelector('.book');
book.addEventListener('click', function() {
this.classList.toggle('flipped');
});

代码解析：

首先选取.book元素，并且添加一个事件监听器，监听页面的点击事件。当用户点击.book元素时，会触发事件监听器。在事件处理函数中，大家需要检查.book元素是否添加了flipped类。如果没有这个类，那么就添加这个类；否则就删除它。这样，每次点击.book元素时都会切换flipped类，从而实现翻页效果。

总之，使用CSS3和JavaScript，大家可以轻松地实现翻书动画效果，这是网页设计中非常酷的一种效果。如果您对CSS3还不太熟悉，也没关系，记住上面的代码样例，通过不断地练习掌握CSS3，您也可以轻松实现这种效果。