具体效果图如下：
主要用到的技术除了3D翻转和定位 ，还用到了一个新的属性 backface-visibility：visable|hidden;
该属性主要是用来设定元素背面是否可见。
具体的步骤如下：
1、写出页面主体，
<div> ???????<img src="Images/b.jpg" alt=""> ???????<img src="Images/c.jpg" alt=""> ???</div>
2、通过定位使两张图片叠加在一起
?div img { ???????????width: 250px; ???????????height: 170px; ???????????position: absolute; ???????????top: 0; ???????????left: 0; ???????????transition: all 1s; ???????}3、设置第一张图片背面不可见
div img:first-child { ???????????z-index: 1; ???????????backface-visibility: hidden; ???????}4、添加旋转180度
div:hover img { ???????????transform: rotateY(180deg); ???????}最后给出完整代码
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style> ???????/* backface-visibility */ ???????????????div { ???????????width: 250px; ???????????height: 170px; ???????????margin: 100px auto; ???????????position: relative; ???????} ???????????????div img { ???????????width: 250px; ???????????height: 170px; ???????????position: absolute; ???????????top: 0; ???????????left: 0; ???????????transition: all 1s; ???????} ???????????????div img:first-child { ???????????z-index: 1; ???????????backface-visibility: hidden; ???????} ???????????????div:hover img { ???????????transform: rotateY(180deg); ???????} ???</style></head><body> ???<div> ???????<img src="Images/b.jpg" > ???????<img src="Images/c.jpg" > ???</div></body></html>CSS 实例之翻转图片
原文地址：https://www.cnblogs.com/Assist/p/9685391.html