原理剖析
要实现CSS3卷脚翻页效果，首先需要理解transform属性和transition属性的作用和意义。transform属性是CSS3中用来实现变换效果的属性，包括旋转、缩放、平移、倾斜等效果。而transition属性则是CSS3中用来实现过渡效果的属性，可以控制元素在属性变化过程中的动画效果。
具体实现卷脚翻页效果时，需要使用到两个div元素，一个放置当前页面内容，一个放置下一页内容。当前页面元素需要设置perspective属性，表示视角深度。卷脚效果需要使用rotateX变换来实现，同时需要配合使用transition属性，控制整个翻页过程的时长和动画效果。
程序实现
.page-turn {
perspective: 1000px;
position: relative;
height: 300px;
}
.current-page, .next-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.current-page {
z-index: 2;
}
.next-page {
z-index: 1;
transform: rotateX(180deg);
transition: transform 1s;
}
.page-turn.turning .current-page {
transform: rotateX(-180deg);
transition: transform 1s;
}
.page-turn.turning .next-page {
transform: rotateX(0deg);
transition: transform 1s;
}上面的代码实现了一个简单的CSS3卷脚翻页效果，通过将两个页面放置在同一容器内，并利用z-index属性设置层叠关系，来实现翻页效果。通过JavaScript控制容器元素的class属性，触发当前页面元素和下一页元素的transform属性变化和transition属性的过渡效果，从而实现卷脚翻页效果。