首先，我們要知道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>
以上僅為本人的觀點，望大家多多指點，不喜勿噴！