HTML:

<div id="rotate">
<div id="rotate_wrap">
<div id="front">
<img src="__PUBLIC__/img/wechat/front.png">
</div>
<div id="back" class="back">
<img src="__PUBLIC__/img/wechat/back.png">
</div>
</div>
</div>

CSS:

/*点击翻转效果*/
#front,#back{
position:absolute; /*将两个图标定位到一起*/
top:0;
left:0;
transform-style:preserve-3d; /*设置为3d样式*/
backface-visibility:hidden; /*背面隐藏*/
transition:0.6s; /*过度动画时长*/
}
.front{transform:rotateY(0);} /*0的就是正面*/
.back{transform:rotateY(180deg);opacity:0;} /*将背面设置为180或-180则为隐藏状态;opacity增强可靠性,非必须*/

JS:

$(function(){
$('#front').on('click',function(){
$(this).addClass('back').removeClass('front');
$('#back').addClass('front').removeClass('back');
});
$('#back').on('click',function(){
$(this).addClass('back').removeClass('front');
$('#front').addClass('front').removeClass('back');
});
});

CSS3卡片旋转效果的更多相关文章

  1. css3 3D旋转效果

    css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...

  2. css3卡片阴影效果

    1.css3阴影用到的知识点:阴影box-shadow和插入:after before HTML部分: <!DOCTYPE html> <html> <head> ...

  3. js+css3实现旋转效果

    我的前面一张文章实现了用css3制作旋转的效果,现在呢,我换另外一种方法来实现.就是使用js结合css3的方法来实现的.下面我就先上图给大家看看效果吧 下面呢我先放上我的css代码,代码很简单: .o ...

  4. 纯手写的css3正方体旋转效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. CSS3圆环旋转效果

    html结构: <div class="demo"></div> css结构: .demo{ width:250px; height:250px; bord ...

  6. 纯css3实现箭头、关闭按钮旋转效果

    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一.但是css3可能要求浏览器执行很多的工作来完成这个动 ...

  7. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

  8. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  9. CSS3 自动旋转

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. java中利用JFrame创建窗体 【转】

    1. 一个简单的swing public class Test(){ public static void main(String[] args){ JFrame frame = new JFrame ...

  2. Google 宣布支持中文邮箱地址

    Gmail 宣布,即日起开始支持非拉丁字符邮箱地址.也就是说,我们可以在 Gmail 中针对中文邮箱地址发送和接收邮件了. 全世界母语是拉丁字母语言的人类不超过全人类总数的一半,母语是英语的人数更少. ...

  3. Mac下为我们开发的App制作gif动画演示(不仅仅针对开发者,想做gif图片的也可参考)

    趁着工作不忙,就闲着倒腾自己的事情,把自己写的一个完整App<丁丁印记>整理了一番,总结其中用到的技术和实现的功能,并想把一些用到的技术分享给各位工友们,因为我自学iOS开发得益于大家的分 ...

  4. MapReduce实现TopK的示例

    由于开始学习MapReduce编程已经有一段时间了,作为一个从编程中寻找自信和乐趣以及热爱编程的孩子来讲,手开始变得很“痒”了,很想小试一下身手.于是自己编写了TopK的代码.TopK的意思就是从原文 ...

  5. 猜猜两道Java基础面试题的结果

    class TA { public String s = "A"; public String getS() { return s; } } class TB extends TA ...

  6. ubuntu添加共享出错

    早上设置一个共享目录share. 右键共享,之后系统自动安装软件samba,之后共享出错: "net usershare"返回错误 255:net usershare: canno ...

  7. WinFrm窗体的传值方式

    比较简单的方法: 一:1.定义两个窗体 2.在父窗体中加入子窗体的属性 public ChildFrm ChildFrm { get; set; } 3.加载的时候: private void Par ...

  8. Date and Time

    The PHP date() function is used to format date and/or a time and formats as timestamp to a more read ...

  9. Qt Charts示例

    Qt 5.7 有一些变化,把原来商业版的几个模块用GPLv3协议放到了社区版本里: Qt Charts (GPLv3) Qt Data Visualization (GPLv3) Qt Virtual ...

  10. [数据结构]RMQ问题小结

    RMQ问题小结 by Wine93 2014.1.14   1.算法简介 RMQ问题可分成以下2种 (1)静态RMQ:ST算法 一旦给定序列确定后就不在更新,只查询区间最大(小)值!这类问题可以用倍增 ...