觉得还挺有意思的嘻嘻~
这里有一个问题要注意一下，图片反转过程中可能会遇到一种如下所示的跳变bug：
这玩意一出来吓我一大跳，显然这种用户体验是很不好的，解决方法：
在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg) 这句话就好啦！要给他一个初始的位置，这样他就不会乱飞啦~
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>图片翻面</title> ???<style type="text/css"> ???????.con{ ???????????width:249px; ???????????height:299px; ???????????margin:100px auto 0; ???????????position:relative; ???????????transform-style: preserve-3d; ???????} ???????.pic, .info{ ???????????width:249px; ???????????height:299px; ???????????position:absolute; ???????????left:0; ???????????top:0; ???????????/*隐藏背面图片*/ ???????????backface-visibility: hidden; ???????????transition: all 1s ease; ???????????/*防止跳变bug*/ ???????????transform:perspective(800px) rotateY(0deg) ; ???????} ???????.info{ ???????????width:249px; ???????????height:299px; ???????????background-color: rgb(80,143,22); ???????????text-align: center; ???????????line-height: 299px; ???????????transform: translateZ(2px) rotateY(180deg); ???????} ???????.con:hover .pic{ ???????????transform: perspective(800px) rotateY(180deg); ???????} ???????.con:hover .info{ ???????????transform: perspective(800px) rotateY(0deg); ???????} ???</style></head><body> ???<div class="con"> ???????<div class="pic"><img src="images/login.jpg" alt="小鸭子"></div> ???????<div class="info">图片文字说明</div> ???</div></body></html>效果图：
CSS3——制作图片翻页的小动画
原文地址：https://www.cnblogs.com/gaoquanquan/p/9168955.html