CSS3之圖片3D翻轉效果(網頁效果--每日一更)，css3翻轉

CSS3之圖片3D翻轉效果(網頁效果--每日一更)，css3翻轉

　　今天，帶來的是純CSS3的效果--圖片3D翻轉。

　　請看效果：http://webfront.verynet.cc/pc/rotate.html

　　這個效果主要還是運用了CSS3的transform變形屬性，與上個效果不同的是，這次並不是動畫，所以沒有採用animation屬性，而是採用transition過渡屬性。這個屬性會將元素在兩種效果之間進行切換，併產生一個過渡效果。詳情請看代碼。

　　HTML結構：

 1     <div id="content"> 2         <div class="list"> 3             <img src="../Images/1.jpg"> 4             <div class="text"> 5                 這是小狗哦！！ 6             </div> 7         </div> 8         <div class="list"> 9             <img src="../Images/2.jpg">10             <div class="text">11                 這是小狗哦！！12             </div>13         </div>14     </div>

　　CSS樣式：

 1 <style type="text/css"> 2         *{margin:0px;padding:0px;} 3         #content{ 4             width:500px; 5             margin:30px auto; 6         } 7         .list{ 8             width:200px; 9             margin:25px;10             float:left;11             position:relative;12         }13         .list img{14             width:200px;15             height:200px;16             transform:perspective(200px) rotateY(0deg);17             opacity:1;18             transition:transform 600ms ease,opacity 600ms ease;19             -webkit-transition:transform 600ms ease,opacity 600ms ease;20         }21         .text{22             height:200px;23             width:200px;24             line-height:200px;25             background:#000;26             color:#fff;27             opacity:0;28             position:absolute;29             text-align:center;30             font-weight:bold;31             top:0px;32             left:0px;33             transform:perspective(200px) rotateY(-180deg);34             transition:transform 600ms ease,opacity 600ms ease;35             -webkit-transition:transform 600ms ease,opacity 600ms ease;36         }37         .list:hover img{38             transform:perspective(200px) rotateY(180deg);39             opacity:0;40             transition:transform 600ms ease,opacity 600ms ease;41             -webkit-transition:transform 600ms ease,opacity 600ms ease;42         }43         .list:hover .text{44             transform:perspective(200px) rotateY(0deg);45             opacity:1;46             transition:transform 600ms ease,opacity 600ms ease;47             -webkit-transition:transform 600ms ease,opacity 600ms ease;48         }49     </style>

　　代碼很容易理解，先為圖片設定一個初始旋轉角度，因為它是先展示的，所以角度為180deg，透明度為1。當滑鼠滑過時，改變角度和透明度，使其翻轉。而背後的文字也是如此道理。

　　享受代碼，享受生活，網頁效果，每日一更。

CSS3翻轉圖片問題

對你的問題倒是沒有答案，只是看到你問題，想插句嘴。你注意-webkit首碼，你要用這種方式實現了，你不用webkit核心的瀏覽器完全沒法看。你應該寫：
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
目前情況下，正確的方式在目前是通過js配合css實現，css3距離普及還早著呢。目前主流瀏覽器對css3和html5的實現方式完全不一樣，所以都得單獨設定。
 
怎利用CSS代碼控制導航圖片翻轉效果？

a:link{background:url("a.jpg")} 連結預設狀態
a:visited{background:url("a.jpg")} 連結訪問過以後的狀態
a:hover{background:url("b.jpg")} 當滑鼠移動上去的狀態
a:active{background:url("c.jpg")} 當前的活動狀態

放到樣式裡面就可以了

具體的導航名稱自己定義！