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