css书本翻页 轮播图 |css子菜单内的内容居中

首先，大家需要准备书本的图片资源。书本的图片需要分成左右两半，分别命名为“left.png”和“right.png”。

.book {
position: relative;
width: 400px;
height: 250px;
}
.book .left, .book .right {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
}
.book .left {
left: 0;
background-image: url(left.png);
}
.book .right {
right: 0;
background-image: url(right.png);
}

代码中，大家先创建一个容器，命名为“book”，并设定宽高。接着，大家创建左右两个子元素，宽度设定为50%，并将背景图片设为“left.png”和“right.png”。

接下来，大家需要制作翻页效果。大家可以利用CSS3的transition属性实现平滑过渡效果。

.book .left {
transform-origin: right top;
transform: rotateY(0deg);
transition: transform 1s;
}
.book .right {
transform-origin: left top;
transform: rotateY(-180deg);
transition: transform 1s;
}
.book:hover .left {
transform: rotateY(180deg);
}
.book:hover .right {
transform: rotateY(0deg);
}

代码中，大家将左侧子元素设置为原始位置，右侧子元素设置为旋转180度的位置。当鼠标悬停在容器上时，大家将左侧子元素旋转180度，右侧子元素回归原始位置。

最后，大家需要设置自动轮播。大家可以使用CSS的animation属性实现自动轮播。

.book .left {
animation: turn 4s linear infinite;
}
.book .right {
animation: turn 4s linear infinite reverse;
}
@keyframes turn {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}

代码中，大家为左右两侧子元素都添加了“turn”动画，并设定时间为4秒，动画函数为“linear”，重复无限次。大家还为动画添加了关键帧，分别为初始位置、翻页中间位置和恢复位置。

好了，大家现在已经学会了如何制作CSS书本翻页轮播图。希望本篇文章对大家有所帮助！