前面两集翻页动画有一个共同特点，就是翻来翻去，即向前翻完再向后翻回来，也就是说向左翻了180度，再向右翻180度。本集，展现的是只向一面翻，实际上画页是在360度不停的旋转，为了达到翻页效果，而避免出现旋转，我们不得不采取措施。翻和转是不同的概念， 给“翻”下个定义，变个角度就叫翻。如果不离轴心，不住地翻，翻了360度或大于了360度，那就是转了。我的旋转动画《绽放的花》就属于“翻”成的，有几个花瓣向左翻，有几个花瓣向右翻，翻到一定角度之后，“原路返回”到原位，然后再翻，形成来回翻页效果。想象一下，要循环不间断的翻页，必须让翻过去的画页返回原位。返回原位有二法：一是原路返回，二是继续向前转回原位。一法必然是来回翻的效果。二法所作，也能想象得出来，不像翻页，一定是个转动的车轮子。要解决这个问题，也就是说，翻过去的画页必须选择一个返回原位的路，在这段路上不能看到它，必须把它隐藏起来，从而实现单向翻页效果。 翻页时看得见，返回原位时看不到，要用到不透明度代码 opacity 。 创造返回原位的路，要增设关键帧 50% { transform: rotateY(-205deg);opacity: 0; } 75% { transform: rotateY(-355deg);opacity: 0; } 。 动画规则如下： @keyframes flipBook0 { 0% { transform: rotateY(0deg);opacity: 1; } 25% { transform: rotateY(-200deg);opacity: 1; } 50% { transform: rotateY(-205deg);opacity: 0; } 75% { transform: rotateY(-355deg);opacity: 0; } 100% { transform: rotateY(-360deg); } } | 
