利用纯css实现图片翻转的效果
2017-03-07 12:22:49
css
这篇文章给大家分享的是利用纯css实现图片翻转效果，对大家的学习使用CSS具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴。
实现效果图如下
实现效果图如下
直接上代码吧
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>
|
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。
