CSS代码:

*{padding: 0;margin: 0;}
.container{width: 90%;padding: 5%;height: 12rem;display: flex;justify-content:space-around; }
.container > div{width: 160px;height: 160px;}
img{width: 100%;height: 100%;display: block;overflow: hidden;}
a{transition:all 1s ease;display: block;height: 100%;}
span{color: #fff; text-align: center;line-height: 160px;}
/*div1*/
.div1 span{display:none;height:100%;background-color:blue;transform:rotateX(-180deg);}
.a1:hover img{display: none;}
.a1:hover span{display: block;}
.a1:hover{transform:rotateX(180deg) scale(.9,.9 );} /*div2*/
.div2 span{display:none;height:100%;background-color:blue;transform:rotateY(-180deg);}
.a2:hover img{display: none;}
.a2:hover span{display: block;}
.a2:hover{transform:rotateY(180deg) scale(.9,.9 );} /*div3*/
.div3{perspective:1000px;}
.div3 a{transform-style:preserve-3d;transition:all .5s ease;}
.div3 span{display:block;height: 160px;background-color:blue;transform-origin:50% 0;transform:rotateX(-90deg); }
.a3:hover{transform:rotateX(90deg) translate3d(0,-80px,80px);} /*div4*/
.div4{perspective:1000px;}
.div4 a{transform-style:preserve-3d;transition:all .5s ease;}
.div4 span{display:block;height: 160px;background-color:blue;transform-origin:50% 100%;transform:translateY(-320px) rotateX(90deg);}
.a4:hover{transform:rotateX(-90deg) translate3d(0,80px,80px);} /*div5*/
.div5{perspective:1000px;}
.div5 a{transform-style:preserve-3d;transition:all .5s ease;}
.div5 span{display:block;height: 160px;background-color:blue;transform-origin:0 50%;transform:translate(100%,-100%) rotateY(90deg); }
.a5:hover{transform:rotateY(-90deg) translate3d(-80px,0,80px);} /*div5*/
.div6{perspective:1000px;}
.div6 a{transform-style:preserve-3d;transition:all .5s ease;}
.div6 span{display:block;height: 160px;background-color:blue;transform-origin:100% 50%;transform:translate(-100%,-100%) rotateY(-90deg); }
.a6:hover{transform:rotateY(90deg) translate3d(80px,0,80px);}

HTML:

<section class="container">
<div class="div1">
<a href="###" class="a1">
<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
<span>轴向二维翻转</span>
</a>
</div>
<div class="div2">
<a href="###" class="a2">
<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
<span>横向向二维翻转</span>
</a>
</div>
<div class="div3">
<a href="###" class="a3">
<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
<span>3D上翻转</span>
</a>
</div>
</section>
<section class='container'> <div class="div4">
<a href="###" class="a4">
<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
<span>3D下翻转</span>
</a>
</div>
<div class="div5">
<a href="###" class="a5">
<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
<span>3D右翻转</span>
</a>
</div>
<div class="div6">
<a href="###" class="a6">
<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
<span>3D左翻转</span>
</a>
</div>
</section>

DEMO地址:http://codepen.io/jonechen/pen/JXwzKQ

CSS3翻转特效;的更多相关文章

  1. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  2. 类似 Google Tips 页面的卡片式提示和翻转特效

    这款 jQuery 插件用于实现类似 Google Tips 页面的卡片式提示和翻转的交互特效.你可以根据自己的需要定制动画效果参数,定义回调函数来控制行为.因为使用了 CSS3,所以只支持 Chro ...

  3. css3动画特效:上下晃动的div

    css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...

  4. ShineTime - 带有 CSS3 闪亮特效的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...

  5. CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  6. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  7. Magic CSS3 一款独特的CSS3动画特效包

    插件描述: Magic CSS3 Animations  动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件:  magic.css  或者压缩版本 ...

  8. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  9. 9款赏心悦目的HTML5/CSS3应用特效

    经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...

随机推荐

  1. Shiro使用总结

    Shiro已经添加到项目中,现阶段管理两个功能: 1.身份验证:(已经能够满足现阶段需求) 2.权限管理: 权限管理,需要在界面中加一些标签,后台角色.资源的管理也需要整理好,然后在前端添加管理. 1 ...

  2. 【Uploadify】远程上传图片到【七牛云存储】

    1.下载Uploadify版本3.2.1 2.下载七牛SDK 解压后将 qiniu 文件夹copy到uploadify文件夹下 3.修改uploadify.php文件 <?php $verify ...

  3. C#中判断文件夹中存在某个txt文本

    strFileName="D:\\strarray.txt"; if (File.Exists(strFileName))//判断文件是否存在 { }

  4. Mongodb添加地理位置索引

    1.同步站点信息到mongo中(支持mysql.sqlserver数据同步) 2.在Collections文件夹下所在文档右键,在菜单中选择Add Index, 3.然后进行数据查询{ "m ...

  5. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  6. thinkphp二维数组模板输出方法

    thinkphp二维数组模板输出方法 先写个记录,有空再整理发上来

  7. 添加TextView隐藏进度条的方法

    在TextView中添加 android:scrollbars="vertical" android:singleLine="false" 在Activity代 ...

  8. 【转载】学习C#的28条建议

    1. 看得懂的书,请仔细看:看不懂的书,请硬着头皮看:2. 别指望看第一遍书就能记住和掌握什么——请看第二遍.第三遍:3. 学习编程的秘诀是:编程,编程,再编程:4. 请把书上的程序例子亲手输入到电脑 ...

  9. c# float和double的“坑”

    定义一个float类型的变量=0.7,结果在IL中却是0.69999999. 乘以10之后,获取整数值.得到的却是6.通过查看IL,竟然被转换成double类型再转换.就变成6了. Demo: IL: ...

  10. IOS应用程序生命周期

    一.IOS应用的5种状态 Not Running(非运行状态) 应用没有运行或被系统终止. Inactive(前台非活动状态) 应用正在进入前台状态,但是还不能接受事件处理. Active(前台活动状 ...