<!DOCTYPE html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>CSS3卡牌翻牌效果</title>

    <style type="text/css">

        #box {

            width: 200px;

            height: 337px;

            /*background: url('tarot_back.jpg') 0 0 no-repeat;*/

            /*background: red;*/

            -webkit-transition: -webkit-transform 0.4s ease-in, width 1s, background 0.8s;

        }

        .nor {

            background: red;

            -webkit-transform: rotate3d(0, 1, 0, 0deg);

        }

        .back {

            background: green;

            -webkit-transform: rotate3d(0, 1, 0, 180deg);

        }

    </style>

</head>

<body>

<div id="box" class="nor">

</div>

</body>

<script type="text/javascript">

    function $(d) {

        return document.getElementById(d);

    }

    var box = $('box');

    box.addEventListener('click', function (e) {

        box.className = 'back';

        setTimeout(function () {

            box.className = 'nor';

        }, 500);

    }, false);

</script>

</html>

css3 翻牌效果的更多相关文章

  1. css3翻牌效果

    原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面 然后通过有过渡(trans ...

  2. 基于css3翻牌效果

    <div class="map_block float_l lineItem"> <a href="javascript:;" class=& ...

  3. css3之3D翻牌效果

      最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...

  4. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  5. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  6. web CSS3 实现3D动态翻牌效果

    使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...

  7. css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法

     主要知识点:rotate旋转以及  outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿  首先看结构: <li class="flip-container " ...

  8. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  9. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

随机推荐

  1. angular实现select的ng-options4

    ng实现简单的select <div ng-controller="ngSelect"> <select ng-model="vm.selectVal& ...

  2. CF 675 div2C 数学 让环所有值变为0的最少操作数

    http://codeforces.com/contest/675/problem/C 题目大意: 给一个环,标号为1-n,然后能从n回到1.让这个环的值为0,最少需要的操作数是多少? 这道题目呀.. ...

  3. 适用于kali linux的远程桌面开启方法(从windows xp 远程登录到kali linux )

    为了解决Windows远程桌面访问Ubuntu 12.04 之一 中提到的VNC远程桌面的缺点(见http://www.linuxidc.com/Linux/2012-07/64801.htm),我们 ...

  4. ASP.NET WebService

    一.WebService:WebService是以独立于平台的方式,通过标准的Web协议,可以由程序访问的应用程序逻辑单元. (1)应用程序逻辑单元:web服务包括一些应用程序逻辑单元或者代码.这些代 ...

  5. codeforces 665B Shopping

    暴力 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #incl ...

  6. mysql Explain 性能分析关键字

    EXPLAIN 输出格式select_typetabletypepossible_keyskeykey_lenrowsExtra MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT ...

  7. Base64编码与图片互转

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...

  8. android4.0 的图库Gallery2代码分析(二)

    最近迫于生存压力,不得不给人兼职打工.故在博文中加了个求点击的链接.麻烦有时间的博友们帮我点击一下.没时间的不用勉强啊.不过请放心,我是做技术的,肯定链接没病毒,就是我打工的淘宝店铺.嘻嘻.http: ...

  9. 数据分析与R语言-概念点（一）

    一.数据分析 1.数据分析的多层模型 常用的统计量 常用的算法 常用的数据分析工具 常见的报表 二.R语言 1.什么是R语言?     R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个 ...

  10. (简单) HDU 3308 LCIS，线段树+区间合并。

    Problem Description Given n integers. You have two operations: U A B: replace the Ath number by B. ( ...