CSS3翻转特效;
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翻转特效;的更多相关文章
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- 类似 Google Tips 页面的卡片式提示和翻转特效
这款 jQuery 插件用于实现类似 Google Tips 页面的卡片式提示和翻转的交互特效.你可以根据自己的需要定制动画效果参数,定义回调函数来控制行为.因为使用了 CSS3,所以只支持 Chro ...
- css3动画特效:上下晃动的div
css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...
- ShineTime - 带有 CSS3 闪亮特效的缩略图相册
ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...
- CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局
原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...
- CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
- Magic CSS3 一款独特的CSS3动画特效包
插件描述: Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- 9款赏心悦目的HTML5/CSS3应用特效
经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...
随机推荐
- 使用Spring开发第一个HelloWorld应用
http://www.importnew.com/13246.html 让我们用Spring来写第一个应用程序吧. 完成这一章要求: 熟悉Java语言 设置好Spring的环境 熟悉简单的Eclips ...
- input文本框实现宽度自适应代码实例,input文本框
本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...
- SQL中迁移sql用户及密码脚本
SQL中迁移sql用户及密码脚本 编写人:CC阿爸 2014-6-20 在日常SQL数据库的操作中,常常需要迁移数据库或重装服务器,这时候,一些之前建立的login账户,必须重新建立,以下可以通过 ...
- 室内净化ThinkPHP复习
"$_GET[id]"这个是和$_GET['id']一样的 foreach的是 name 和 item if(!empty($_GET['id'])){ $where.= &quo ...
- MYSQL的存储引擎一般只要哪些?
根据个人个人见解: MySQL的存储引擎(构成.安全.锁) Myisam:数据操作快速的一种引擎,支持全文检索.文件保存在数据库名称为目录名的 目录中,有3个文件,分别是表定义文件(.frm).数据文 ...
- C++求等比数列之和
题目内容:已知q与n,求等比数列之和:1+q+q2+q3+q4+……+qn. 输入描述:输入数据不多于50对,每对数据含有一个整数n(1<=n<=20).一个小数q(0<q<2 ...
- 个人代码管理--svn
通常开发中遇到自己电脑和公司电脑代码共享的问题.比如一些通用的库,图片等项目中基本通用. 一些项目库如google code, github内地访问又挺困难的,常常无法连接,或者慢死..还有就是必须开 ...
- c# float和double的“坑”
定义一个float类型的变量=0.7,结果在IL中却是0.69999999. 乘以10之后,获取整数值.得到的却是6.通过查看IL,竟然被转换成double类型再转换.就变成6了. Demo: IL: ...
- deep learning学习环境Theano安装(win8+win7)
官网安装说明Installing Theano:http://deeplearning.net/software/theano/install.html#alternative-anacondace ...
- Linux下自带的regex
Linux下可直接用regex.h来支持正则表达式. Android同样也有该头文件,可认为Android也是支持的. #include <sys/types.h> #include &l ...