主页 / 建站知识 /

利用纯css实现图片翻转的效果

建站知识 2021-07-03 08:16www.168986.cn长沙网站建设

实现效果图如下

直接上代码吧

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-: 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 ,left bottom,from(#fdbb5a), to(#db5726));
background: -moz-linear-gradient(,#fdbb5a,#db5726);
width: 220px;
height: 200px;
line-height: 200px;
}
</style>


以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。

上一篇：CSS控制div宽度最大宽度/高度和最小宽度/高度的方 下一篇：利用CSS定位背景图片的常用方法总结

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by