觉得还挺有意思的嘻嘻~
这里有一个问题要注意一下，图片反转过程中可能会遇到一种如下所示的跳变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>
效果图：