CSS3翻书效果3D动画实现
CSS3 的翻书效果,视觉上就挺抓人的,尤其在做电子书、相册、杂志类页面的时候,加分。核心是用3D 变换模拟翻页动作,比如rotateY()
搞 Y 轴旋转,加上perspective
就有深度感了,挺像真的在翻书。
翻页动画能不能自然,主要看你transition
用得怎么样,像transition: transform 0.6s ease
,能让动作不那么僵。再进阶一点,用@keyframes
配合animation
,搞一套完整的翻书动作,比如从打开页到合上。
结构上,页面通常一页一个
下载地址
用户评论