利用純css實現圖片翻轉的效果-創新互聯

這篇文章將為大家詳細講解有關利用純css實現圖片翻轉的效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創新互聯公司從2013年創立，先為霍林郭勒等服務建站，霍林郭勒等地企業，進行企業商務咨詢服務。為霍林郭勒企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

實現效果圖如下

利用純css實現圖片翻轉的效果

直接上代碼吧

1, body部分

代碼如下:

 <body>
   <div class="container">
     <div class="wrap">
       <div class="image">
         <div class="display front">
           <img src="image/img1.jpg" alt="" />
         </div>
         <div class="display back">
           <h4>灰白的愛車</h4>
         </div>
       </div>
     </div>
     <div class="wrap">
       <div class="image">
         <div class="display front">
           <img src="image/img2.jpg" alt="" />
         </div>
         <div class="display back">
           <h4>吉他boy</h4>
         </div>
       </div>
     </div>
     <div class="wrap">
       <div class="image">
         <div class="display front">
           <img src="image/img3.jpg" alt="" />
         </div>
         <div class="display back">
           <h4>俊俏的horse</h4>
         </div>
       </div>
     </div>
   </div>
 </body>

2, style部分

代碼如下:

<style media="screen">
     * {
       padding: 0;
       margin: 0;
     }
     body {
       background-color: rgb(244, 244, 244);
     }
     .container {
       width: 1000px;
       margin: auto;
       margin-top: 3em;
       clear: left;
     }
     .wrap {
       -webkit-perspective:400;
       -moz-perspective:400;
       float: left;
       width: 220px;
       margin-right: 20px;
     }
     .image {
       width: 100%;
       height: 200px;
       -webkit-transform-style:preserve-3d;
       -webkit-transition:1.5s;
       -moz-transform-style:preserve-3d;
       -moz-transition:1.5s;
     }
     img {
       width: 220px;
       height: 200px;
     }
     .wrap:hover .image {
       -webkit-transform:rotateY(180deg);
       -moz-transform:rotateY(180deg);
     }
     .display {
       position: absolute;
       -webkit-backface-visibility:hidden;
       -moz-backface-visibility:hidden;
     }
     .display h4 {
       color: white;
       text-align: center;
     }
     .back {
       -webkit-transform:rotateY(180deg);
       -moz-transform:rotateY(180deg);
       background: -webkit-gradient(linear,left top,left bottom,from(#fdbb5a), to(#db5726));
       background: -moz-linear-gradient(top,#fdbb5a,#db5726);
       width: 220px;
       height: 200px;
       line-height: 200px;
     }
   </style>

關于“利用純css實現圖片翻轉的效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

新聞標題：利用純css實現圖片翻轉的效果-創新互聯
轉載來源：http://vcdvsql.cn/article10/cdjdgo.html

成都網站建設公司_創新互聯，為您提供定制開發、網站導航、網站排名、移動網站建設、標簽優化、小程序開發

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

利用純css實現圖片翻轉的效果-創新互聯