利用純css實(shí)現(xiàn)圖片翻轉(zhuǎn)的效果-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為霍林郭勒等服務(wù)建站，霍林郭勒等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為霍林郭勒企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

實(shí)現(xiàn)效果圖如下

利用純css實(shí)現(xiàn)圖片翻轉(zhuǎn)的效果

直接上代碼吧

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>

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

新聞標(biāo)題：利用純css實(shí)現(xiàn)圖片翻轉(zhuǎn)的效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://bm7419.com/article10/cdjdgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站導(dǎo)航、網(wǎng)站排名、移動網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、小程序開發(fā)

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

猜你還喜歡下面的內(nèi)容