利用純css實(shí)現(xiàn)圖片翻轉(zhuǎn)的效果
發(fā)布時間：2016-10-09 14:35:41 作者：大白有褶子 
我要評論
我要評論這篇文章給大家分享的是利用純css實(shí)現(xiàn)圖片翻轉(zhuǎn)效果，對大家的學(xué)習(xí)使用CSS具有一定的參考借鑒價值，有需要的朋友們可以參考借鑒。
實(shí)現(xiàn)效果圖如下
直接上代碼吧
1, body部分
復(fù)制代碼
代碼如下:<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">
<h3>灰白的愛車</h3>
</div>
</div>
</div>
<div class="wrap">
<div class="image">
<div class="display front">
<img src="image/img2.jpg" alt="" />
</div>
<div class="display back">
<h3>吉他boy</h3>
</div>
</div>
</div>
<div class="wrap">
<div class="image">
<div class="display front">
<img src="image/img3.jpg" alt="" />
</div>
<div class="display back">
<h3>俊俏的horse</h3>
</div>
</div>
</div>
</div>
</body>
2, style部分
復(fù)制代碼
代碼如下:<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 h3 {
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>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能有所幫助，如果有疑問大家可以留言交流。
相關(guān)文章
一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實(shí)例教程
這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實(shí)例教程，css3使我們能夠跳出2d空間，實(shí)現(xiàn)3維空間的動畫效果，這里給出一個自動翻轉(zhuǎn)的3d色子動畫效果制作過程2014-12-31css3實(shí)現(xiàn)3D色子翻轉(zhuǎn)特效
這篇文章主要介紹了css3實(shí)現(xiàn)3D色子翻轉(zhuǎn)特效的制作過程及示例代碼，非常的不錯，效果也非常棒，這里推薦給大家。2014-12-23一款利用純css3實(shí)現(xiàn)的360度翻轉(zhuǎn)按鈕的實(shí)例教程
這篇文章主要為大家介紹了利用純css3實(shí)現(xiàn)的翻轉(zhuǎn)360動畫按鈕的方法，代碼簡單易懂，實(shí)現(xiàn)出來的效果卻很美觀，需要的朋友可以過來復(fù)制代碼，順便學(xué)習(xí)一下2014-11-05CSS濾鏡實(shí)現(xiàn)的顏色漸變翻轉(zhuǎn)效果
這篇文章主要為大家介紹了利用CSS中的濾鏡效果實(shí)現(xiàn)漸變翻轉(zhuǎn)效果的代碼，不會的朋友可以和腳本之家的小編一起學(xué)習(xí)一下，以后想要實(shí)現(xiàn)漸變翻轉(zhuǎn)效果就不難啦2014-10-09純CSS實(shí)現(xiàn)菜單、導(dǎo)航欄的3D翻轉(zhuǎn)動畫效果
隨著瀏覽器技術(shù)的進(jìn)步，CSS動畫技術(shù)已經(jīng)不是只那些簡單的淡入淡出效果或幻燈片效果，它們能做很多更強(qiáng)大的事情2014-04-23css控制列表與導(dǎo)航的制作(水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)
這篇文章主要介紹了css控制列表與導(dǎo)航的制作,包括水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)聯(lián)列表、列表樣式等制作方法,需要的朋友可以參考下2014-04-15css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例
這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下2014-04-08CSS圖片翻轉(zhuǎn)動畫技術(shù)詳解（IE也實(shí)現(xiàn)了）
因?yàn)椴粩嘤腥藛栁遥F(xiàn)在我補(bǔ)充一下：IE是支持這種技術(shù)的！盡管會很麻煩。需要做的是旋轉(zhuǎn)front和back元素，而不是旋轉(zhuǎn)整個容器元素。如果你使用的是最新版的IE，可以忽略這2014-04-03- css 2.0還是沒有翻轉(zhuǎn)的，3.0里面有rotate屬性，這個可以把元素進(jìn)行任意角度旋轉(zhuǎn)，灰常強(qiáng)大，下面有個不錯的示例，大家可以參考下2014-02-27
CSS Cookbook 創(chuàng)建文字導(dǎo)航菜單和翻轉(zhuǎn)特效
CSS Cookbook例子 創(chuàng)建文字導(dǎo)航菜單和翻轉(zhuǎn)特效2009-12-15