CSS3实现类似翻书效果的过渡动画的示例代码

实现类似翻书效果的过渡动画可以通过使用CSS3的transform属性和transition属性来实现。以下是示例代码的完整攻略。

1. 准备工作

在HTML中添加一个含有前后两个div元素的容器，其中一个div元素包含需要翻转的内容。代码如下：

<div class="book">
   <div class="page page1">
       <!-- 此处为需要翻转的内容 -->
   </div>
   <div class="page page2">
       <!-- 此处为背面显示的内容 -->
   </div>
</div>

在CSS中定义.book的宽度、高度和透视距离，代码如下：

.book {
   position: relative;
   width: 340px;
   height: 226px;
   perspective: 1000px;
}

定义.page的宽度、高度和背景颜色，代码如下：

.page {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #7694ff;
}

注意：将.page1和.page2的背景颜色设置成不同的颜色，便于观察效果。

2. 添加翻转效果

将.page2元素沿Y轴旋转180度，并将transform-origin设置为右侧，使其沿右侧边缘翻转。代码如下：

.page2 {
   transform: rotateY(-180deg);
   transform-origin: right;
}

3. 添加过渡动画

将.page元素添加transition属性，当旋转角度发生变化时，以0.8秒的时间进行平滑过渡。代码如下：

.page {
   transition: transform 0.8s ease;
}

4. 添加翻转交互

通过JavaScript监听鼠标在.book元素上的移动，修改.page1和.page2的transform属性值，从而实现翻转效果。代码如下：

var book = document.querySelector('.book');
book.addEventListener('mousemove', function(e) {
   var page1 = document.querySelector('.page1');
   var page2 = document.querySelector('.page2');
   var mouseX = e.pageX - book.offsetLeft;
   var flipAngle = mouseX / book.offsetWidth * 180;
   page1.style.transform = 'rotateY(' + flipAngle + 'deg)';
   page2.style.transform = 'rotateY(' + (flipAngle - 180) + 'deg)';
});

示例说明

示例1

在上述代码基础上，修改page2的背景色，使其与page1的背景色相同，即页面前后两部分背景色相同。观察交互效果，发现过渡时出现的空白背景闪烁现象。解决办法在代码中已经体现。

示例2

在上述代码基础上，添加鼠标移动的平滑过渡，使效果更加流畅，代码中已经设置过渡时间为0.8s。如果需要更加明显的过渡动画效果，可以适当增加该过渡时间，或通过调整过渡时间函数（如ease-in，ease-out）来改善效果。