首先，我们要知道css3对浏览器的支持性比较低，css3只支持ie10及以上的一些版本比较新的浏览器。那么，想要支持火狐、谷歌等其他浏览器，需要加相应的前缀：
-webkit- /* 支持safari 和 Chrome */
-moz- /* 支持firefox */
-ms- /* 支持ie */
-o- /* 支持opera */
了解了这个基础的知识以后，我们来分析一下想要实现如题的效果，该从何做起。
第一，想要实现图片翻转显示不同的效果，毫无疑问应该有两块内容，因此要用两个div将其包裹；
第二，想要实现翻转前和翻转后翻转的内容处在浏览器的相同位置不变，就要对这两个div进行定位；
基本的框架做好了，就要用到重要的css3效果了
第三，元素垂直翻转用到的是css3里面的rotateY(angle)这一属性，这里需要注意的是，想要保证背面的div翻转以后仍然保持文字是从左向右展示的，就需要在初始化时将背面的div进行180deg旋转一次；
第四，transform是元素变换的名字，transform是表示元素变换的属性。使用方法：transition:transform 1s linear 0s;(第一个参数表示元素变换名称，第二个参数表示元素变换总时间，第三个参数表示元素变换曲线，默认为线性变换，第四个参数为元素变换开始之前停留的时间，即推迟变换的时间)。
下面我们就用实例来实现以下最终的效果：
<!DOCTYPE html> <html > <head> <title>test</title> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <meta name="author" content="xuyunfei"> <meta name="description" content="随便做做测试"> <meta name="keywords" content="test,html"> <title>随便做做</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .container, .one, .two{ width: 100px; height: 100px; } .container{ position: relative; transition: 1s; transform-style: preserve-3d; } .container:hover { transform: rotateY(180deg); } .back{ position: absolute; top: 0; background: red; transform: rotateY(180deg); backface-visibility: hidden; } .front{ position: absolute; top: 0; background: yellow; backface-visibility: hidden; } </style> </head> <body> <!-- <div class="par"> --> <div class="container"> <div class="back">隐藏在背后的元素</div> <div class="front">初始显示在前面的元素</div> </div> <!-- </div> --> <script type="text/JavaScript"> </script> </body> </html>
以上仅为本人的观点，望大家多多指点，不喜勿喷！