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. 使用Google API 下拉刷新或者增加数据 SwipeRefreshLayout

    贴出布局代码: <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/id_swipe_ly" and ...

  2. 升级或安装 GNOME Shell

    1.安装经典Gnome桌面系统 install gnome-session-fallbackinstall gnome-appletsinstall indicator-applet indicato ...

  3. IOS弹出视图 LewPopupViewController

    LewPopupViewController是一款IOS弹出视图软件.iOS 下的弹出视图.支持iPhone/iPad. 软件截图 使用方法 弹出视图 1 2 3 4 5 PopupView *vie ...

  4. STM32之延时秒,毫秒,微秒

    #include "delay.h" #include "stdint.h" #include "stm32f10x.h" ; //us延时 ...

  5. Javascript使用总结

    Javascript(简称JS)简介 JavaScript是一门广泛用于浏览器客户端的脚本语言,由Netspace公司设计,当时跟Sun公司(已经被oracle收购)合作,所以名字起得像Java,业内 ...

  6. linux下获取帮助

    -h --help man 代號 代表內容 使用者在shell中可以操作的指令或可执行档 系統核心可呼叫的函数与工具等 一些常用的函数(function)与函数库(library),大部分是C的函数库 ...

  7. arguments.callee

    arguments.callee在哪个函数中运行,他就代表哪个函数,一般在匿名函数中.在匿名函数中有时需要自己调用自己,但是由于是匿名函数,没有名字,所以可以用arguments.callee来代替匿 ...

  8. 2016 - 1- 14 UI阶段学习补充 transform属性详解

    UIView的transform属性 transform是view的一个重要属性,它在矩阵层面上改变view的显⽰状态,能实现view的缩放.旋转.平移等功能.transform是CGAffineTr ...

  9. 2016-1-9 Quartz框架的学习,剪裁图片并设置边框

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  10. TVB-Gone 红外编码方法

    每次都重新推算一遍,年纪大了还是记录一下吧(硬件版的TV-B-Gone的压缩编码跳过此段往下看) N900上有个TVB-Gone的程序,但是程序的红外编码往往都是对应的国外的电视,好多国产电视都不支持 ...