欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2016-10-09 14:35:41   作者：大白有褶子   我要評(píng)論
這篇文章給大家分享的是利用純css實(shí)現(xiàn)圖片翻轉(zhuǎn)效果，對(duì)大家的學(xué)習(xí)使用CSS具有一定的參考借鑒價(jià)值，有需要的朋友們可以參考借鑒。

實(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>灰白的愛(ài)車</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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能有所幫助，如果有疑問(wèn)大家可以留言交流。

相關(guān)文章

最新評(píng)論