利用纯css实现图片翻转的效果
发布时间：2016-10-09 14:35:41 作者：大白有褶子 
我要评论
我要评论这篇文章给大家分享的是利用纯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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。
相关文章
- 这篇文章主要为大家介绍了一款基于css3麻将筛子3D翻转特效的实例教程，css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程2014-12-31
- 这篇文章主要介绍了css3实现3D色子翻转特效的制作过程及示例代码，非常的不错，效果也非常棒，这里推荐给大家。2014-12-23
- 这篇文章主要为大家介绍了利用纯css3实现的翻转360动画按钮的方法，代码简单易懂，实现出来的效果却很美观，需要的朋友可以过来复制代码，顺便学习一下2014-11-05
- 这篇文章主要为大家介绍了利用CSS中的滤镜效果实现渐变翻转效果的代码，不会的朋友可以和脚本之家的小编一起学习一下，以后想要实现渐变翻转效果就不难啦2014-10-09
- 随着浏览器技术的进步，CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果，它们能做很多更强大的事情2014-04-23
css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内
这篇文章主要介绍了css控制列表与导航的制作,包括水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样式等制作方法,需要的朋友可以参考下2014-04-15- 这篇文章主要介绍了css3 的图形3d翻转效果应用,需要的朋友可以参考下2014-04-08
- 因为不断有人问我，现在我补充一下：IE是支持这种技术的！尽管会很麻烦。需要做的是旋转front和back元素，而不是旋转整个容器元素。如果你使用的是最新版的IE，可以忽略这2014-04-03
- css 2.0还是没有翻转的，3.0里面有rotate属性，这个可以把元素进行任意角度旋转，灰常强大，下面有个不错的示例，大家可以参考下2014-02-27
- CSS Cookbook例子 创建文字导航菜单和翻转特效2009-12-15
最新评论