純css3實(shí)現(xiàn)圖片翻牌特效
發(fā)布時(shí)間：2015-03-10 09:47:06 作者：佚名 
我要評論
我要評論本文給大家分享的是一則使用原生CSS3實(shí)現(xiàn)的圖片翻牌效果，十分的炫酷，代碼卻很簡單，這里推薦給有相同需求的小伙伴們。
大家先看下效果演示：
是不是非常不錯(cuò)，下面把實(shí)現(xiàn)代碼分享給大家。
復(fù)制代碼
代碼如下:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 翻牌</title>
</head>
<body>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none; margin:0; padding:0;}
.brandsShow{ width:1200px; height:620px; margin:0 auto; }
.brandsShow ul{ margin-left:-20px; width:1225px; height:auto; }
.brandsShow ul li{ float:left; display:inline; width:283px; height:283px; }
.flip-container {perspective: 1000;
-webkit-perspective: 1000px; /*父類容器中 perspective 子類允許透視*/
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
margin:0px auto; float:left; margin-left:20px; margin-bottom:20px; border:1px solid #fff;}
.flip-container:hover .back {transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;}
.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1}
.flip-container, .front, .back {width: 283px;height: 283px;}
.flipper {transition:transform 0.6s ease-out;
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out;
-ms-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
-webkit-transform-style: preserve-3d; /*使其子類變換后得以保留 3d轉(zhuǎn)換后的位置*/
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
display:block;position: relative;}
.front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}
.front img, .back img{ width:283px; height:283px; overflow:hidden;}
.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}
.back { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}
</style>
<ul>
<li class="flip-container " ontouchstart="this.classList.toggle('hover');">
<a href="brandLi.html" class="flipper">
<div class="front "><img src="images/pic/brand10.jpg">前面</div>
<div class="back " ><img src="images/pic/brand01.jpg">后面</div>
</a>
</li>
<li class="flip-container " ontouchstart="this.classList.toggle('hover');">
<a href="brandLi.html" class="flipper">
<div class="front "><img src="images/pic/brand10.jpg"></div>
<div class="back " ><img src="images/pic/brand01.jpg"></div>
</a>
</li>
</ul>
</body>
</html>
以上就是本文所述的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這是一款實(shí)現(xiàn)js 3D旋轉(zhuǎn)木馬特效插件。該插件通過CSS3和純js來完成，可中間以3D旋轉(zhuǎn)的方式來展示一組圖片，歡迎下載2019-08-16
css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼
這篇文章主要介紹了css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-29微信小程序?qū)崿F(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值2018-09-11- 本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例，非常具有實(shí)用價(jià)值，有想去的可以了解一下。2017-01-04
- 大家應(yīng)該都玩過刮刮樂，如何實(shí)現(xiàn)刮刮樂效果，這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)簡易版的刮刮樂效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-27
css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果
本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-09
